Copyright: Copyright 1998 Adobe Systems, Inc.


Quick Reference

Selecting and moving

Tool and Transformation shortcuts

Viewing


Selecting and moving
Quick Reference

Selecting and moving

 Shift   [image] Function

Adds to or subtracts from selection group	Any selection tool +
Moves duplicate of a selection	Alt + drag selection
Moves selection 1 pixel
Moves selection 10 pixels	+
Makes alias of object	Alt + [image] + drag object


Tool and Transformation shortcuts
Quick Reference

Tool and Transformation shortcuts

 Shift   [image] Function

Display Properties or Transform palette.	Double-click tool in toolbar
Picks up style attributes of selected object	+ [image] + click
Constrains rotation to 15º angle	+ rotate tool
Constrains object to square, circle, or proportional polygon	+ rectangle,ellipse, or polygon tool
Resizes object from center	Alt + drag resize handle
Constrains object proportions while resizing	+ drag resize corner handle
Activates rotate tool	Ctrl + pointer over corner
Activates skew tool	Ctrl + pointer over handle
Activates layer offset tool	Ctrl + pointer over center of object


Viewing
Quick Reference

Viewing

 Shift   [image] Function

100% magnification	Double-click
Zooms in or out	Ctrl + [image] or
Scrolls composition with hand tool	Spacebar + drag


Basic Concepts

About Adobe ImageStyler

Creating and opening ImageStyler files

Changing the size of the composition area

Saving files

Printing

Using the toolbox

Using palettes

Viewing the composition

Using context menus (Windows only)

Using Adobe’s online services


About Adobe ImageStyler
Basic Concepts

About Adobe ImageStyler

To get the most out of Adobe ImageStyler, it is worthwhile getting to know a few essential concepts used in this Web graphics program. These concepts are referred to throughout this user guide.

See also:

Compositions

Objects

Shapes

Layers

Layer attributes

Styles

Editing

The ImageStyler file format

Exporting


Compositions
About Adobe ImageStyler

Compositions

In ImageStyler, you create and lay out one or more objects in a document, or composition. The window in which it is displayed is the composition window.

Once created, you can export individual objects in the composition in an image file format for placement in a Web page, or export the entire composition in HTML format as a Web page itself.


Objects
About Adobe ImageStyler

Objects

Objects are the basic elements you create and work with in ImageStyler compositions. They are the pieces with which you can design and build the graphic elements for a Web page.

There are three kinds of objects in ImageStyler:

•   Geometric objects are objects you create with the drawing tools. Circles and rectangles are examples of geometric objects.

•   Text objects are text you create using the type tool or import from other documents.

•   Image objects are bitmap images and Encapsulated PostScript(R) (EPS) vector images that you import into ImageStyler or create using the Shapes palette or Combine commands.

A. Geometric object B. Text object C. Image object (bitmap) D. Image object (EPS vector)


Shapes
About Adobe ImageStyler

Shapes

All objects have a shape:

•   Geometric objects have a regular shape, and are either rectangles, polygons, or ellipses.

•   Text objects are the shape of the individual characters in the text.

•   Bitmap images generally have a rectangular shape (unless they have an alpha channel or active matte).

•   EPS vector images are the shape in which they were created by the application. For example, an EPS vector image of a flower would be in the shape of that flower.


Layers
About Adobe ImageStyler

Layers

An object is made up of one to five layers, with each layer the shape of that object. (Unlike some other graphics programs, such as Adobe Photoshop and Adobe Illustrator, layers in ImageStyler apply to individual objects, not the entire composition.)

When you first create an object, it has just a single layer. You can then add, delete, reorder, and offset layers at any time. For example, the bottom layer can be offset to simulate a shadow for the object.

Object and layers that make it up


Layer attributes
About Adobe ImageStyler

Layer attributes

Each layer in an object can be filled with a different set of attributes, including color, opacity, gradients, and 3-D and distortion effects. You can even apply an image as a texture to a layer.

By applying different attributes to each layer, you can create a variety of effects and create complex-looking objects. For example, to create a button out of a simple geometric object, you might give it three layers. You could emboss and fill the top layer with a texture. You could make the next layer wider and fill it with a color to give the effect of an outline around the button. And you could offset a third layer and fill it with semitransparent gray to simulate a shadow for the button.

Different layer attributes applied to A. Geometric object B. Text object C. Image object (bitmap) D. Image object (EPS vector)


Styles
About Adobe ImageStyler

Styles

You can save the number of layers along with the attributes of each layer as a set, called a style. You can then apply the style to any object to easily change the look of the object without changing its shape. For example, you can apply a style to a text object to give the object several layers, each with a different set of layer attributes. The text object would then have all the attributes of that style.

Same style applied to A. Geometric object B. Text object C. Image object (bitmap) D. Image object (EPS vector)


Editing
About Adobe ImageStyler

Editing

You can apply nearly any modifications to any objects in any order. You can even apply them to multiple objects at the same time. This means you can transform objects by skewing, rotating, and resizing them, regardless of the kind of object it is or the layer attributes currently applied to it. You can also change individual layer attributes or entire styles at any time, regardless of what other transformations you have made to the object.

A. Original B. Transformations applied C. New Style applied

Text objects are fully editable. This means you can rewrite the text in a text object, as well as change its font properties and layer attributes at any time.

Moreover, editing is nondestructive. You can remove modifications made to any object without altering the underlying object. For instance, you can shrink an imported image, skew it, apply a style to it, and still return the image to the way it looked when you first imported it—even if you’ve saved and closed the composition multiple times.


The ImageStyler file format
About Adobe ImageStyler

The ImageStyler file format

Saving a composition in ImageStyler format maintains all objects in the composition, along with their modifications and their attributes, so that you can reedit the objects at any time.


Exporting
About Adobe ImageStyler

Exporting

ImageStyler objects are intended for display on the Web. To help you with this, ImageStyler provides the most common image export formats and a variety of tools that let you export individual objects from a composition for placement in Web pages.

Depending on your Web page editing program, you can then import these graphics into the Web pages you are creating or maintaining. (With the AutoLayout option, ImageStyler also enables you to export an entire composition as a single Web page with its component graphics.)

In addition, ImageStyler provides features that enable you to create JavaScript rollovers—objects that change as your mouse moves over and clicks them in a Web page. ImageStyler also lets you easily update graphics in existing Web pages. You can even use any font type and layer attributes you can create in ImageStyler to update text headings in a Web page.


Creating and opening ImageStyler files
Basic Concepts

Creating and opening ImageStyler files

The New command lets you create a blank, untitled ImageStyler composition. By default, the working area for a new composition is 550 pixels wide by 500 pixels tall, and has a white background. The maximum size is 1024 by 1024 pixels.

The Open command opens existing ImageStyler files.

Once opened, you can create, place, import, and modify objects in the composition.

To create a new ImageStyler composition:

Choose File > New.

See also:

To open an existing ImageStyler file


To open an existing ImageStyler file
Creating and opening ImageStyler files

To open an existing ImageStyler file:

1  Choose File > Open.

2  Select the name of the ImageStyler file you want to open, and click Open. (By default, Windows ImageStyler files end in the extension .ist.)


Changing the size of the composition area
Basic Concepts

Changing the size of the composition area

In Adobe ImageStyler, the composition area, also known as the canvas, is the area in which you create and place ImageStyler objects—your work space. It also represents the maximum size of an object you can create, import, or export.

The Canvas Size command lets you increase or decrease the size of the composition area.

To change the size of the composition area:

1  Choose Edit > Canvas Size.

2  Enter the width and height for the composition area in pixels.

3  Click OK.

Original document, and with composition size increased


Saving files
Basic Concepts

Saving files

When you save a file, you save it in ImageStyler format. This saves your original artwork so that you can reedit and export it later. To use the graphics or a composition on a Web page, you must export it. See Exporting compositions.

ImageStyler files use the extension .ist on Windows. Naming your Mac OS files with this extension will allow for easier cross-platform work. The Windows and Mac OS ImageStyler file formats are completely compatible.

To save a file in ImageStyler format:

Choose File > Save.

To save a file for the first time:

1  Choose one of the following save commands:

•   File > Save.

•   File > Save As.

2  Enter a filename, and choose a location for the file.

3  Click Save.

To save a file with a different filename:

1  Choose File > Save As.

2  Enter a filename, and choose a location for the file.

3  Click Save.


Printing
Basic Concepts

Printing

Although ImageStyler compositions are intended for use on the Web, you can print compositions as well. Compositions are printed at screen resolution, which for ImageStyler is 72 dots per inch (dpi). Printing a composition at a higher resolution (such as on a 300-dpi printer) will not increase the resolution of the printed output.

The Page Setup dialog box lets you select general printing options. The exact appearance of this dialog box varies with different printers, printer drivers, and operating systems. The main area of the dialog box contains the standard printing options for paper type, printer effects, reduction and enlargement, and orientation.

Most Print dialog boxes provide options for printing the document. As with the Page Setup dialog box, the exact appearance of this dialog box varies depending on the printer, driver, and operating system you are using.

To set up the page size and orientation for printing:

1  Choose File > Page Setup.

2  Choose page options and click OK.

See your printer documentation for more information on these options.

To print the document:

1  Choose File > Print.

2  Choose printing options and click Print.

See your printer documentation for more information on these options.


Using the toolbox
Basic Concepts

Using the toolbox

The tools in the toolbox let you select, create, fill, edit, and view objects, as well as choose an object or the background to fill with color or textures. For information on the object and background color controls, see Choosing the foreground (layer) and background color.

When you select most tools, the mouse pointer appears as a cross hair. However, the text tool pointer is an Ibeam, and the pointer for the paint bucket, eyedropper, hand, and zoom tools matches the tool’s icon. Each pointer has a different hotspot, where an effect or action begins.

ImageStyler includes these tools:

To display the toolbox:

Choose Window > Tools.

To move the toolbox:

Drag the toolbox by its title bar.

To select a tool:

Click its icon in the toolbox.

To select a tool temporarily, press its shortcut key on the keyboard.


Using palettes
Basic Concepts

Using palettes

Palettes help you monitor and modify objects. You can display or hide palettes as you work.

By default, palettes appear in stacked groups.The positions of all open palettes are saved by default when you exit the program.

To show or hide a palette:

Choose the name of the palette from the Window menu.

A check mark next to the command’s name indicates that the selected palette is at the front of its group.

See also:

Changing the palette display

Entering values

Returning palettes to their original organization


Changing the palette display
Using palettes

Changing the palette display

You can reorganize your work space using several techniques.

To change the palette display:

Do any of the following:

•   To display or hide all palettes and the toolbox, press Option+Tab (Mac OS only).

•   To display or hide all open palettes (and the toolbox in Mac OS), press Tab.

•   To display or hide all open palettes except the toolbox, press Shift+Tab.

Note: (Mac OS only) To use the previous three shortcuts while you are in a palette, press and hold Command in addition to the shortcuts. Otherwise, pressing Tab moves the cursor to the next text box in the palette.

•   To make a palette appear at the front of its group, click the palette’s tab.

Click Opacity tab to move it to front.

•   To move an entire palette group, drag its title bar.

•   To rearrange or separate a palette group, drag a palette’s tab. Dragging a palette outside of an existing group creates a new group.

Click palette tab, and drag palette to a different location in group.

•   To move a palette to another group, drag the palette’s tab to that group.

Click palette tab, and drag palette to new group.

Palettes are grouped.

•   To display a palette menu, position the pointer on the triangle in the upper right corner of the palette, and hold down the mouse button.

•   To collapse or expand the palette group (Mac OS only), click the window shade box in the right of the title bar.

Click to collapse or expand palette.


Entering values
Using palettes

Entering values

Some palettes contain options that let you enter values using any combination of sliders, angle controls, arrow buttons, and text boxes.

A. Slider B. Arrow buttons C. Text box D. Angle control

To enter values:

Do one of the following:

•   Type a value in the text box. Then click a different option or text box in the palette; press Tab to go to a different text box in the palette; click the background in the composition; press Enter (Windows) or Return (Mac OS).

•   Drag the slider to the desired value. Shift-drag to move the slider in increments of 10.

•   Click or hold down the up arrow or down arrow button in the palette to increase or decrease the value.

•   (Windows only) Click in the text field and then click the Up Arrow or Down Arrow key on the keyboard to increase or decrease the value.

•   (Windows only) Use the mouse wheel to increase or decrease the value.

•   Drag the angle control to the desired value. Shift-drag to change the angle in 15-degree increments.

•   Drag from the arrow at the top right of the palette to display a list of commands for the palette.

To cancel values before you apply them:

Press the Escape key.


Returning palettes to their original organization
Using palettes

Returning palettes to their original organization

The way you have organized your palettes is kept from one work session to the next. The Reset to Defaults command lets you return the palettes to their original, default groupings and locations.

To restore all palettes to their original organization:

Choose Window > Reset to Defaults.


Viewing the composition
Basic Concepts

Viewing the composition

The hand tool, the zoom tools, and the Zoom commands let you view different areas of the composition and at different magnifications.

You can display compositions from 100% to 800% magnification, in 100% increments. The composition window’s title bar displays the zoom percentage at all times.

You can open several compositions at once. A list of open compositions appears in the Window menu.

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


Changing viewing options
Viewing the composition

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


To view another part of a composition
Viewing the composition

To view another part of a composition:

If the composition window does not display the entire composition, do one of the following:

•   Use the composition window scroll bars.

•   Select the hand tool ( [image]), and drag in the composition to move its view.

Drag hand tool to move view.

To use the hand tool while another tool is selected, press H or the spacebar as you drag in the composition.

See also:

Changing viewing options

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


To arrange multiple compositions (Windows)
Viewing the composition

To arrange multiple compositions (Windows):

Do one of the following:

•   Choose Window > Cascade to display composition windows overlapping from the top left to the bottom right of the screen.

•   Choose Window > Tile to display composition windows edge to edge vertically and horizontally. For example, if you have six open compositions, ImageStyler displays them tiled two across and three down.

•   Choose Window > Arrange Icons to line up the icons for minimized ImageStyler composition windows.

See also:

Changing viewing options

To view another part of a composition

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


To arrange multiple composition windows (Mac OS)
Viewing the composition

To arrange multiple composition windows (Mac OS):

Do one of the following:

•   Choose Window > Stack to display composition windows stacked and cascading from the top left to the bottom right of the screen.

•   Choose Window > Tile to display composition windows edge to edge vertically and horizontally. For example, if you have six open compositions, ImageStyler displays them tiled two across and three down.

•   Choose Window > Tile Vertical to display composition windows edge to edge horizontally.

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


To close compositions
Viewing the composition

To close compositions:

Choose File > Close to close the active composition window.

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


To exit ImageStyler
Viewing the composition

To exit ImageStyler:

Choose File > Exit (Windows) or Quit (Mac OS).

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To zoom in

To zoom out

To magnify by dragging

To display artwork at 100%


To zoom in
Viewing the composition

To zoom in:

Do one of the following:

•   Select the zoom tool ( [image]), and click the area you want to magnify. Each click magnifies the artwork to the next preset percentage, centering the display around the point you click. At maximum magnification, the center of the zoom tool is blank.

•   Choose View > Zoom In to magnify to the next preset percentage.

•   Press Control+(+) (Windows) or Command+(+) (Mac OS).

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom out

To magnify by dragging

To display artwork at 100%


To zoom out
Viewing the composition

To zoom out:

Do one of the following:

•   Select the zoom tool. Hold down Alt (Windows) or Option (Mac OS) to activate the zoom-out tool (a minus sign appears in the tool), and click the area of the artwork you want to reduce from a magnified view. Each click reduces the view to the previous preset percentage.

•   Choose View > Zoom Out to reduce to the previous preset percentage.

•   Press Control+(-) (Windows) or Command+(-) (Mac OS).

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To magnify by dragging

To display artwork at 100%


To magnify by dragging
Viewing the composition

To magnify by dragging:

1  Select the zoom tool ( [image]).

2  Drag over the part of the composition you want to magnify.

Drag zoom tool to magnify area.

The area inside the zoom marquee appears at the highest possible magnification. The area is displayed within the composition window’s current dimensions.

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To display artwork at 100%


To display artwork at 100%
Viewing the composition

To display artwork at 100%:

Do one of the following:

•   Choose View > Actual Size.

•   Double-click the zoom tool ( [image]).

•   Double-click the hand tool ( [image]).

See also:

Changing viewing options

To view another part of a composition

To arrange multiple compositions (Windows)

To arrange multiple composition windows (Mac OS)

To close compositions

To exit ImageStyler

To zoom in

To zoom out

To magnify by dragging


Using context menus (Windows only)
Basic Concepts

Using context menus (Windows only)

In addition to the menus at the top of your screen, a context menu in Windows displays commands relevant to the selected object.

To display the context menu:

1  Position the pointer over the selected object.

2  Click with the right mouse button (Windows).


Using Adobe's online services
Basic Concepts

Using Adobe’s online services

If you have an Internet connection and a Web browser installed on your system, you can access the Adobe Systems Home Page on the World Wide Web (at http://www.adobe.com) for information on services, products, and tips pertaining to ImageStyler.

To use Adobe Online:

1  Do one of the following:

•   Choose File > Adobe Online.

•   Click the icon at the top of the toolbox.

2  Click a topic to open the Adobe home page.


Creating Basic Objects

About objects

Drawing rectangles, polygons, and ellipses

About shapes

Applying shapes

Creating text objects


About objects
Creating Basic Objects

About objects

Objects are the basic pieces with which you can design and build elements for a Web page. There are three types of objects in ImageStyler:

•   Geometric objects, which are created with the ImageStyler drawing tools. For more information, see Drawing rectangles, polygons, and ellipses.

•   Text objects, which are created with the type tool or are imported from other documents and applications that support text. For more information, see Creating text objects.

•   Image objects, which are imported image files, image-object-based shapes created with the Shapes palette, or objects combined with the Combine commands. For more information, see Importing Images as Objects; About shapes; and Combining objects.

Geometric objects

Text object

Image objects from the Shapes palette

Imported images

For a discussion of the general properties of objects and what you can do with them, see About Adobe ImageStyler. For more information about layers and styles that you can apply to objects, see Applying Styles and Layers to Objects.


Drawing rectangles, polygons, and ellipses
Creating Basic Objects

Drawing rectangles, polygons, and ellipses

You can create geometric objects in Adobe ImageStyler by drawing basic geometric shapes. The tools in ImageStyler let you easily create the following shapes:

•   The rectangle tool draws rectangles and squares.

•   The rounded-rectangle tool draws round-cornered rectangles and squares.

•   The polygon tool draws objects with from three to ten straight sides, each side being the same distance from the center of the object.

•   The ellipse tool draws ellipses and circles.

Once you’ve created a basic shape using these tools, you can further modify their shape by using the Properties palette. For more information, see Using the Properties palette to modify geometric objects.

See also:

To draw a rectangle, rounded rectangle, polygon, or ellipse


To draw a rectangle, rounded rectangle, polygon, or ellipse
Drawing rectangles, polygons, and ellipses

To draw a rectangle, rounded rectangle, polygon, or ellipse:

1  Select the rectangle tool ( [image]), the rounded-rectangle tool ( [image]), the polygon tool ( [image]), or the ellipse tool ( [image]).

2  Position the pointer at one corner or edge of the shape you want to create, and drag diagonally until the shape is the desired size.

Shift-drag to draw shapes of equal height and width—for instance, draw squares with the rectangle tool and circles with the ellipse tool.

Note: After you draw an object, the selection tool is automatically chosen. To draw another object, reselect the drawing tool.

3  If you drew a polygon and want to change the number of sides in it, see Using the Properties palette to modify geometric objects.


About shapes
Creating Basic Objects

About shapes

The Shapes palette lets you work with a variety of premade shapes. You can add these shapes to the composition as new objects, or apply them to an existing object to change the object’s shape while retaining the rest of the object’s layer attributes.

You can also save the shape of any object in the Shapes palette.

Object selected, and replaced with arrow shape

The following guidelines apply to shapes:

•   Any type of object can be saved as a shape.

•   Saving an object as a shape saves all of its attributes.

Use the Shapes palette to store objects. For example, save an image object in the Shapes palette for use in other ImageStyler compositions.

•   If you place a shape, it becomes an object on its own.

•   If you replace an object with a shape, the resulting object is combined with the type of object from which the shape is made. The Properties palette for the resulting object displays the properties of the object from which the shape is made.

For example, if you save a geometric object as a shape and then apply that shape to a text object, the text object becomes a geometric object combined with the text object. In this example, the Properties palette would display the properties for a geometric object. For more information on combining objects, seeCombining objects.

•   You can uncombine an object that has had a shape applied to it. The resulting object is the object from which the shape was made.

•   EPS vector-based image objects scale better than bitmap image objects. For example, if you apply a shape based on an EPS vector image created in Adobe Illustrator and then enlarge the resulting object, the object’s edges remain crisp. If you apply a shape based on a bitmap image and then enlarge the object, the object’s edges will become pixelated, or blocky.

•   If you replace an object with a shape, the shape is fitted within the bounding box of the object. The top and bottom or sides of the shape may be cropped to fit into the bounding box.

•   If you replace an image object with a shape, the resulting object will be the current foreground (layer) color. For example, if you replace the image of a red apple with a black arrow from the Shapes palette, and the current foreground (layer) color is yellow, the result is a yellow image object in the shape of the arrow.

Use the crop tool and resize tool to display the entire shape at the size you want.

•   If you use the Matte option to apply a shape to an image object, ImageStyler crops the image to the shape and retains the color information of the image. For example, if you use the Matte option to crop the image of a red apple with a black arrow from the Shapes palette, the result is an image of the apple cropped to the shape of the arrow.


Applying shapes
Creating Basic Objects

Applying shapes

The Shapes palette lets you save and apply shapes. For more information on shapes, see About shapes.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To display the Shapes palette
Applying shapes

To display the Shapes palette:

1  Choose Window > Shapes.

2  Choose a view for the sample shapes:

•   Swatches View to display a scrollable list of thumbnail examples of shapes.

•   Preview View to display a scrollable list of named shapes with a large thumbnail for the currently selected shape.

•   Name View to display a scrollable list of named shapes with a small thumbnail for the currently selected shape.

See also:

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To create (place) objects with a premade shape
Applying shapes

To create (place) objects with a premade shape:

In the Shapes palette, do one of the following:

•   Select the shape you want from the list and click Place to create an object with that shape. (You can type the name of a shape to select it.)

•   Make sure no object is currently selected in the composition window. Then double-click the shape from the list to select and create an object with that shape.

•   Drag the shape onto the composition window to create an object with that shape.

You can also create an object by dragging an image file directly from a folder or directory onto the background of the ImageStyler composition.

See also:

To display the Shapes palette

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To replace or crop objects with a premade shape
Applying shapes

To replace or crop objects with a premade shape:

1  Select the object whose shape you want to replace with a shape or crop to a shape.

2  Select the shape you want from the list. (You can type the name of a shape to select it.)

3  Do one of the following in the Shapes palette:

•   Click Replace, or press Enter (Windows) or Return (Mac OS) to replace the shape of the currently selected object in the composition with the selected shape in the Shapes palette.

•   Double-click the shape from the list to select and replace the object with that shape.

•   Drag the shape onto an existing object to replace the object’s shape. The existing object displays selection handles when it is selected.

•   Click Matte to crop the selected image object to the shape. This option can only be applied to image objects. For more information, see Using alpha channels and active mattes to crop image objects.

You can also replace an object by dragging an image file directly from a folder or directory onto the object.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To add a shape or image to the palette by dragging
Applying shapes

To add a shape or image to the palette by dragging:

1  Do one of the following:

•   Select an object in the composition window.

•   Open the folder or directory containing an image file ImageStyler can import.

2  Drag the image, shape object, or file onto the Shapes palette.

3  In the dialog box that appears, enter the name you want to give the shape and click OK.

The shape or image is placed in alphabetical order in the list of available shapes.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To add a shape or image to the palette by specifying an image file
Applying shapes

To add a shape or image to the palette by specifying an image file:

1  Click the New button ( [image]) on the Shapes palette.

2  Locate the image file containing the shape you want to add to the Shapes palette and click Open.

3  In the dialog box that appears, enter the name you want to give the shape and click OK.

A copy of the shape or image file is saved as a shape and placed in alphabetical order in the list of available shapes.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To add a shape or image to the palette by placing it in the Shapes folder
Applying shapes

To add a shape or image to the palette by placing it in the Shapes folder:

1  If you want, rename an image file in the Explorer (Windows) or Finder(TM) (Mac OS) to give it the name you want to appear in the Shapes palette. For Windows and improved cross-platform compatibility, the image file should have the correct extension for the type of image it is.

2  Place the file into the Shapes folder located in the ImageStyler folder.

The shape or image is placed in alphabetical order in the list of available shapes the next time you start ImageStyler.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To replace a shape or image in the palette

To delete a shape or image from the Shapes palette


To replace a shape or image in the palette
Applying shapes

To replace a shape or image in the palette:

Add a shape as described in this section, but name it the same as an existing shape.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To delete a shape or image from the Shapes palette


To delete a shape or image from the Shapes palette
Applying shapes

To delete a shape or image from the Shapes palette:

1  In the Shapes palette, select the shape you want to delete.

2  Click the Trash button ( [image]).

Note: Deleting a shape removes it from your system. This action cannot be undone.

See also:

To display the Shapes palette

To create (place) objects with a premade shape

To replace or crop objects with a premade shape

To add a shape or image to the palette by dragging

To add a shape or image to the palette by specifying an image file

To add a shape or image to the palette by placing it in the Shapes folder

To replace a shape or image in the palette


Creating text objects
Creating Basic Objects

Creating text objects

The type tool lets you create horizontal and vertical type. You can edit the text at any time using the Type tool dialog box or Properties palette. You can also specify the font, size, leading, tracking, and alignment of the type and edit its characters.

In addition, ImageStyler lets you create type in double-byte fonts, enabling you to create designs that include Japanese, Korean, or Chinese text, for instance (if you have the correct system software installed on your system).

Note: You cannot mix fonts within the same text object. To mix English text with Japanese text, for example, create one text object for the English text, and another text object for the Japanese text.

Text objects can be modified just like any other object. You can apply different styles to a text object, and you can transform its shape, create multiple layers, and apply different attributes to any of the resulting layers.

Original text, and with style, texture, and transformation applied

The resulting text objects can be used with other objects to create graphics and banners that you can export to your Web page. You can even export the type and style attributes to change the existing heading text in Web pages. For information, see Exporting for the Web.

See also:

Anti-aliased type

Kerning type

Entering text

Editing text

Setting type attributes


Anti-aliased type
Creating text objects

Anti-aliased type

Text in ImageStyler is automatically anti-aliased. Anti-aliasing produces smooth-edged type by partially filling the edge pixels. As a result, the edges of the type blend into the background. Anti-aliasing can make small type sizes appear more readable when viewed online.

With and without anti-aliasing; inset zoom 200%

When creating text for online use, consider using larger type than you would use for printed works. Because of the low resolution of monitors, larger type can be easier to view online.


Kerning type
Creating text objects

Kerning type

Many fonts have information about the spacing of character pairs. For example, the spacing between a W and an A (as in “WAVE”) often is less than the spacing between an R and an A (as in “RAKE”). ImageStyler uses a font’s kerning information to space characters.


Entering text
Creating text objects

Entering text

You enter text by selecting the type tool and clicking in the composition window to set an insertion point. The Type Tool dialog box lets you enter the text and specify formatting attributes.

See also:

To enter text


To enter text
Entering text

To enter text:

1  Select the type tool ( [image]). The pointer changes to an I-beam pointer.

2  Click in the composition window to specify the top left corner for the type.

If there is any existing text in the Type Tool dialog box, a preview of the type with the text appears in the composition.

3  Specify type attributes, as described in Setting type attributes.

4  Click inside the text area at the bottom of the dialog box, and enter your text. The text appears in the composition as you type.

5  To create a line break, press Enter (Windows) or Return (Mac OS) while the cursor is in the text area.

 To import text, drag it into the text area or the composition from another application that supports drag and drop, or copy and paste it from another composition or application. The resulting type may vary, depending on the application from which you imported it.

6  If necessary, use the scroll bar to display text that has filled the text area.

7  Click OK.

8  To adjust the placement of the type, drag the type in the composition.


Editing text
Creating text objects

Editing text

Once you have created a text object, you can edit the contents, attributes, and orientation at any time. A text object can contain multiple layers and can have a style or other set of attributes applied to it, the same as other objects in ImageStyler. You can move, restack, copy, and change the layer options of a text object just as with other objects. For more information, see Applying Styles and Layers to Objects. You can also apply all of the other commands available with ImageStyler objects and still be able to edit the text.

See also:

To edit a text object

To select text in the Type Tool dialog box


To edit a text object
Editing text

To edit a text object:

1  Choose a selection tool or the type tool ( [image]).

2  Do one of the following:

•   Double-click the text object or select it and press Enter (Windows) or Return (Mac OS). Then rewrite the text or change the type attributes for the entire text object as described in Setting type attributes.

•   Select the text object and change its attributes in the Properties palette, as described in Setting type attributes.

See also:

To select text in the Type Tool dialog box


To select text in the Type Tool dialog box
Editing text

To select text in the Type Tool dialog box:

Position the cursor in the text area of the Type Tool dialog box and do one of the following:

•   Drag to select the text you want to rewrite.

•   Click to define the beginning of the selected text, and Shift-click to define the end of the selection.

•   Position the cursor in a word, and double-click to select that word.

•   Press Command+A (Mac OS only) to select all the characters in the text area.

Selecting characters in text area

See also:

To edit a text object


Setting type attributes
Creating text objects

Setting type attributes

Adobe ImageStyler gives you precise control over type attributes, including font, type size, leading, tracking, alignment, and rotation. The resulting attributes apply to the entire text object.

To apply most type attribute changes to existing type, you must first select the type. You can apply the following type attributes:

Font

A font is a complete set of characters, letters, and symbols of a particular typeface design. For example, the font used in this paragraph is Minion(R). In addition to choosing a font, you can choose a type style (for example, Regular, Bold, or Italic) if the style is included in the font family. The range of available type styles varies with each font.

Size

The size determines how large the type appears in the image. The default type size is 48 points, where one point is equal to 1/72 of an inch in a 72-ppi image.

Outlining

Outlining lets you display type as an outlined, rather than filled, object. The Outline option works only with vector (TrueType(TM) or PostScript) fonts, not bitmap (screen) fonts. If you select a bitmap font, this option is disabled.

Leading

Leading specifies the spacing between baselines and is measured as a percentage of the point size.

20-point type with 120 % leading, and with 200 % leading

Tracking

Tracking inserts uniform spacing between characters in the text object.

Positive tracking values move characters apart; negative values move characters closer together. Tracking values are measured in units that are 1/100 of an em space. The width of an em space is equal to the width of the lowercase letter m in the current font and type size.

Default, and tracking set to 40

Alignment

Alignment controls the orientation of characters and lines of type. Horizontal orients characters next to each other, with each new line below the previous one. Vertical—Left to Right orients characters below each other, with each new line to the right of the previous one. Vertical—Right to Left orients characters below each other, with each new line to the left of the previous one.

See also:

To set type attributes

To adjust the font size by dragging


To set type attributes
Setting type attributes

To set type attributes:

1  Do one of the following:

•   Using a selection tool, double-click the text to display the Type dialog box.

•   Select the text and choose Window > Properties to display the Properties palette.

2  Specify type attributes in the Type dialog box or Properties palette:

•   For Font, choose a font family. Choose a type style from the menu to the right of the Font menu.

•   For Size, enter a value for the font’s size.

•   To create outlined type instead of filled type, select Outline and enter a value in 1/4 pixels for the outline width.

Note: This option is available only for TrueType and PostScript fonts.

•   For Leading, enter a value.

•   For Tracking, enter a value.

•   Select a horizontal or vertical alignment option. The left or top alignment option begins each line of type at the left or top edge of the bounding box. The center alignment option centers the type in the bounding box. The right or bottom alignment option ends each line with the right or bottom edge of the bounding box.

See also:

To adjust the font size by dragging


To adjust the font size by dragging
Setting type attributes

To adjust the font size by dragging:

1  Select the text in the composition window.

2  Do any of the following:

•   Drag any handle except the side handles and the top right handle to change the font size of the text.

•   Shift-drag any of the corner handles except the top right one to constrain the type to the aspect ratio of the original font.

For more information on transforming text, see About transforming objects.

See also:

To set type attributes


Importing Images as Objects

Adobe ImageStyler lets you work with artwork created in image-editing or illustration applications, such as Adobe Photoshop or Adobe Illustrator, by importing images. You can place (or embed) images in an existing ImageStyler document. You can also scan images directly into ImageStyler.

You can import images created in other applications in various ways:

•   The Place command lets you place, or embed, images in an existing ImageStyler composition.

•   The Replace command lets you place an image in a selected object, replacing the selection.

•   The Place as Texture command lets you place a texture in an existing ImageStyler composition or selection. (See Applying textures to layers.)

•   The Import commands let you import images from external devices using Photoshop import plug-ins and acquire images from a TWAIN device. (See Scanning images.)

•   The Paste command lets you transfer artwork to an ImageStyler composition using the Clipboard.

•   The drag-and-drop feature lets you copy and paste images into Adobe ImageStyler. You can drag and drop any files that can be placed with the Place command or pasted with the Paste command.

See also:

About imported images

Placing files

Replacing objects

Using plug-in modules to import artwork

Scanning images

Pasting images and objects

Dragging and dropping to copy between applications


About imported images
Importing Images as Objects

About imported images

How Adobe ImageStyler treats imported images depends on the type image:

•   Vector images (Encapsulated PostScript, or EPS, and Illustrator files) retain their vector graphics properties and can be scaled without losing quality.

•   Bitmap images are converted to pixel-based image objects. Compressed image files are left compressed—thus reducing file and memory size. Bitmap images you can place include TIFF, GIF, JPEG, PNG, BMP and DIB (Windows), PICT (Mac OS), and Photoshop files.

Note: When you place an EPS file that contains fonts not installed on your system, ImageStyler substitutes fonts on your system for the missing fonts.


Placing files
Importing Images as Objects

Placing files

The Place command places files from other applications as new image objects in an ImageStyler document.

You can place both vector and bitmap graphics files in an ImageStyler composition, including EPS, TIFF, GIF, JPEG, PNG, BMP (Windows), PICT (Mac OS) files, and Photoshop 2.5 or later (flattened RGB or Grayscale files).

To place files created by other applications:

1  Open the ImageStyler document in which you want to place the file.

2  Choose File > Place.

3  Locate and select the file you want to place. If you don’t see the name of the file you want, thefile has been saved in a format that ImageStyler cannot read.

4  Click Place to add the file to the active ImageStyler window as a new image object.


Replacing objects
Importing Images as Objects

Replacing objects

The Replace command places a file from another application within the bounding box (the borders that define the boundaries of the image) of a selected object, and maintains the style and transformation information of the original object.

For example, you can import an image into ImageStyler and manipulate the image object; reedit the image in the original application; and then in ImageStyler use Replace to select the image object and replace it with the edited image—thus reapplying all transformations and multilayer effects and cropping the object as needed.

To replace an ImageStyler object with a placed file:

1  Open the ImageStyler composition in which you want to place the artwork.

2  Select the object or objects you want to replace.

3  Choose File > Replace.

4  Locate and select the file you want to use to replace the selected object. If you don’t see the name of the file you want, the file has been saved in a format that ImageStyler cannot read.

5  Click Replace.

ImageStyler scales the replacement image to match the selected object as closely as possible; if needed, crops the object along the shortest dimension; and then reapplies any transformations or effects you previously applied to the image.


Using plug-in modules to import artwork
Importing Images as Objects

Using plug-in modules to import artwork

Plug-in modules are software programs developed by Adobe Systems, and by other software developers in conjunction with Adobe Systems, to expand the importing capabilities of Adobe ImageStyler.

A number of importing plug-ins—like the TWAIN module that lets you acquire images from TWAIN-compliant scanners and other digital sources—come with your program and are automatically installed in the Plug-ins folder. In addition, ImageStyler can use Photoshop Import plug-ins for Mac OS that come with many digital cameras. Other plug-in modules (such as the Kodak Photo CD(TM)) are available from third-party sources.

Once installed, plug-in modules appear as options in the Import menu, or as file formats in the Place dialog box.

To install an Adobe Systems plug-in module:

If an installer is provided, use it to install the plug-in module. Otherwise, drag a copy of the module to the Plug-ins folder inside the Adobe ImageStyler folder.

Follow any installation instructions that come with third-party plug-ins.


Scanning images
Importing Images as Objects

Scanning images

Adobe ImageStyler lets you import images directly from any scanner if your computer has installed the compatible third-party plug-in module (that is, scanning software written, provided, and supported by the scanner manufacturers) or that supports the TWAIN interface.

For instructions on installing an Adobe ImageStyler-compatible plug-in module, see your scanner documentation; See Using plug-in modules to import artwork for general plug-in information.

Note: Before you scan an image, make sure that the software necessary for your scanner has been installed. Scanner drivers are provided and supported by the manufacturers of the scanners, not by Adobe Systems. If you have problems with scanning, make sure that you are using the latest version of the appropriate scanner driver.

See also:

Importing scanned images

Scanning an image using the TWAIN interface

Importing an anti-aliased PICT file (Mac OS only)

Importing PICT Resources (Mac OS only)


Importing scanned images
Scanning images

Importing scanned images

Use these guidelines to scan and import an image into Adobe ImageStyler.

•   ImageStyler can import images with a maximum resolution of 300 dots per inch.

•   If the scanner has an Adobe ImageStyler-compatible plug-in module, choose the scanner name from the File > Import submenu.

•   If the scanner supports the TWAIN interface, scan the image as described in the next section.

•   If the scanner supports neither an Adobe ImageStyler-compatible plug-in module nor the TWAIN interface, use the scanner manufacturer’s software to scan the image, and then save the image in a format that can be placed in ImageStyler (such as TIFF, GIF, or Photoshop).


Scanning an image using the TWAIN interface
Scanning images

Scanning an image using the TWAIN interface

TWAIN is a cross-platform interface for acquiring images captured by certain scanners, digital cameras, and frame grabbers. The manufacturer of the TWAIN device must provide a Source Manager and TWAIN Data source for your device to work with ImageStyler.

Adobe ImageStyler supports the current TWAIN_32 standard for scanning. Contact your scanner manufacturer for information on the availability of TWAIN_32 source modules.

To import an image using the TWAIN interface:

1  If you’re using the TWAIN device for the first time with Adobe ImageStyler, choose File > Import > Select TWAIN_32 Source (Windows) or File > Import >TWAIN-Select Source (Mac OS). Then select the device you’re using. You do not need to repeat this step for subsequent uses of the TWAIN device with ImageStyler.

If more than one TWAIN device is installed in your system and you want to switch devices, use the Select Source command.

2  To import the image, choose TWAIN_32 (Windows) or TWAIN Acquire (Mac OS) from the File > Import submenu.


Importing an anti-aliased PICT file (Mac OS only)
Scanning images

Importing an anti-aliased PICT file (Mac OS only)

Choose File > Import > Anti-aliased PICT to import object-oriented PICT files as smooth-edged, or anti-aliased, images.

The Anti-aliased PICT dialog box indicates the current file size and dimensions. To change the image dimensions, enter new values for Width and Height. The file size is then updated. To maintain image proportions, select Constrain Proportions.


Importing PICT Resources (Mac OS only)
Scanning images

Importing PICT Resources (Mac OS only)

The PICT Resource module lets you read PICT resources from a file. To open a PICT resource, choose File > Import > PICT Resource.

To preview a resource, click Preview. Click the arrow buttons to step forward and backward through the resources. Note that the number displayed for Resource refers to the resource’s position in ascending order in the resource fork and not to the resource’s identification number.


Pasting images and objects
Importing Images as Objects

Pasting images and objects

You can use the Edit > Cut or Copy commands to copy selections within ImageStyler and between ImageStyler and other applications. The cut or copied selection remains on the Clipboard until you cut or copy another selection.

If you copy objects within ImageStyler, you can paste the copies as new objects or apply them to a selected object as a style.

You can also use the Edit > Cut or Copy and Paste commands to copy images and text into ImageStyler—including EPS, DIB (Windows), PICT (Mac OS), and ASCII and RTF file formats.


Dragging and dropping to copy between applications
Importing Images as Objects

Dragging and dropping to copy between applications

The drag-and-drop feature lets you move images from another application into ImageStyler, or from ImageStyler to other applications, such as Photoshop, bitmap graphics applications, and word-processing applications.

You can drag and drop into ImageStyler any image file that can be imported. Depending on where you drop the image, ImageStyler creates the following:

•   Dropping the image onto an ImageStyler object replaces the object with the image.

•   Dropping the image onto the composition window creates a new image object.

•   Dropping text from another application onto the composition creates a new text object.

•   Dropping an image onto an object layer fills that layer with texture. See Applying textures to layers.

•   Dropping an ImageStyler file into a composition window adds the entire contents, as a group, to the composition. See Grouping objects.

•   Dragging an object or objects from one ImageStyler composition to another ImageStyler window creates a copy of the selection in the new window.

In Mac OS, the application must support Macintosh(R) Drag Manager.

See also:

To drag and drop selections of artwork from Adobe ImageStyler to the desktop

To drag and drop artwork into a Photoshop or another image window


To drag and drop selections of artwork from Adobe ImageStyler to the desktop
Dragging and dropping to copy between applications

To drag and drop selections of artwork from Adobe ImageStyler to the desktop:

1  Select the artwork you want to copy.

2  Drag the selection onto the desktop.

In Windows, the selection is copied to the desktop as a Scrap file (Metafile). In Mac OS, the selection is copied as a picture clipping (PICT). Later you can drag and drop these files into another file.

See also:

To drag and drop artwork into a Photoshop or another image window


To drag and drop artwork into a Photoshop or another image window
Dragging and dropping to copy between applications

To drag and drop artwork into a Photoshop or another image window:

1  Select the artwork you want to copy.

2  Open the Photoshop image into which you want to copy the selection.

3  Drag the selection toward the Photoshop image and release the mouse button.

See also:

To drag and drop selections of artwork from Adobe ImageStyler to the desktop


Managing Objects

Undoing changes

Selecting objects

Duplicating objects and making aliases

Cutting, copying, and pasting objects and attributes

Moving objects

Stacking objects

Grouping objects

Maintaining text alignment with grouped objects

Aligning and distributing objects


Undoing changes
Managing Objects

Undoing changes

All changes to your composition can be undone. You can even undo or redo an operation after you choose the Save command, as long as you haven’t closed the file.

You can also undo multiple previous steps. (However, available memory may limit your ability to use this option.)

At times, you may want to undo all of the operations that you have performed since you last saved the file. In this case, you can use the Revert command rather than the Undo command. When you choose Revert, you lose all changes made to the composition since the last time it was saved.

Note: A Revert command cannot be undone.

See also:

To undo or redo the previous operations

To return to the last-saved version of the file


To undo or redo the previous operations
Undoing changes

To undo or redo the previous operations:

1  Do one of the following:

•   Choose Edit > Undo (operation) one or more times to move backward through the previous changes.

•   Choose Edit > Undo > Undo (operation) followed by the name of the operation. This undoes all changes made after and including the operation.

•   Choose Edit > Redo (operation) one or more times to move forward through the changes you undid.

•   Choose Edit > Undo > Redo (operation). This redoes all changes made after and including the operation.

If an operation can’t be undone or redone, the command is dimmed and replaced by Can’t Undo or Can’t Redo.

See also:

To return to the last-saved version of the file


To return to the last-saved version of the file
Undoing changes

To return to the last-saved version of the file:

Choose File > Revert, and click OK (Windows) or Revert (Mac OS).

See also:

To undo or redo the previous operations


Selecting objects
Managing Objects

Selecting objects

Before you can edit or modify an object, you need to distinguish it from the objects around it. You do this by selecting the object with a selection tool:

•   The selection tool ( [image]) lets you select objects by selecting any spot on the object.

•   The drag-selection tool ( [image]) lets you drag to select and move objects that are covered by other objects.

•   The subgroup-selection tool ( [image]) lets you select a subgroup or object within a group. Each additional click selects the next lower subgroup or object in the grouping hierarchy to the selection. (See Grouping objects.)

Three groups: Object A is part of group B, which in turn is part of group C.

Regardless of the selection tool you use, you can select through an open area in an object to select a different object behind it. For example, you can click the selection tool on the open space in the text object “O” to select another object behind it.

Selection handles appear on objects as they are selected. Once you have selected an object, you can select a specific layer of that object to modify. For information on selecting layers, see Using the Object Layers palette.

See also:

To select an object

To select an object hidden behind another object

To select grouped objects

To select or deselect multiple objects

To select all objects in the composition

To deselect all objects


To select an object
Selecting objects

To select an object:

1  Choose the selection tool ( [image]), drag-selection tool ( [image]), or subgroup-selection tool ( [image]).

2  Do one of the following:

•   Click the object with the selection or group-selection tool.

•   Drag a rectangle, called a marquee, around the entire bounding box of the object or objects you want to select.

See also:

To select an object hidden behind another object

To select grouped objects

To select or deselect multiple objects

To select all objects in the composition

To deselect all objects


To select an object hidden behind another object
Selecting objects

To select an object hidden behind another object:

1  Select the drag-selection tool ( [image]).

2  Drag a marquee over the entire bounding box of the object or objects you want to select.

Drag drag-selection tool to select and move object that is under another object.

See also:

To select an object

To select grouped objects

To select or deselect multiple objects

To select all objects in the composition

To deselect all objects


To select grouped objects
Selecting objects

To select grouped objects:

1  Select the subgroup-selection tool ( [image]), and click the group, subgroup, or object you want to select.

2  Click the same place again to select successive subgroups until you have selected the subgroup or individual object you want.

Selection handles appear on subgroups and objects as they are selected. A thick border appears around the group or subgroup to which the selected subgroup or object belongs.

First click selects subgroup and displays border around group to which it belongs. Second click selects object and displays border around subgroup to which it belongs.

See also:

To select an object

To select an object hidden behind another object

To select or deselect multiple objects

To select all objects in the composition

To deselect all objects


To select or deselect multiple objects
Selecting objects

To select or deselect multiple objects:

Do one of the following:

1  Choose the selection tool ( [image]), subgroup-selection tool ( [image]), or drag-selection tool ( [image]).

2  Do one of the following:

•   Click an object.

•   Drag a marquee over the entire bounding box of one or more objects.

3  With one or more objects selected, do one of the following:

•   Shift-click to select or deselect additional objects.

Click one object. Then Shift-click additional objects.

•   Shift-drag a marquee over other objects to select or deselect them.

See also:

To select an object

To select an object hidden behind another object

To select grouped objects

To select all objects in the composition

To deselect all objects


To select all objects in the composition
Selecting objects

To select all objects in the composition:

1  Make sure no objects are selected.

2  Choose Edit > Select All.

See also:

To select an object

To select an object hidden behind another object

To select grouped objects

To select or deselect multiple objects

To deselect all objects


To deselect all objects
Selecting objects

To deselect all objects:

Do one of the following:

•   With a selection tool, click or drag away from any object.

•   Choose Edit > Deselect All.

See also:

To select an object

To select an object hidden behind another object

To select grouped objects

To select or deselect multiple objects

To select all objects in the composition


Duplicating objects and making aliases
Managing Objects

Duplicating objects and making aliases

You can duplicate objects as well as make aliases of them. Duplicating an object is similar to copying and pasting it in a single step, but without using the Clipboard to temporarily store the copy.

When you make aliases, ImageStyler creates duplicates that maintain all of the attributes of the original. Any change you make to the original or an alias is reflected in both the original and all the aliases.

Original with duplicate and after modifying original

Original with alias and after modifying original

Because an alias is a reference to the original object, using aliases can speed up redraws of objects, minimize the file size of a composition, and save time when updating the look of existing Web pages.

See also:

To duplicate an object

To make an alias of an object

To unlink an alias from the original object


To duplicate an object
Duplicating objects and making aliases

To duplicate an object:

1  Select the object for which you want to create a duplicate.

2  Do one of the following:

•   Choose Edit > Duplicate.

•   Alt-drag (Windows) or Option-drag (Mac OS) the object.

See also:

To make an alias of an object

To unlink an alias from the original object


To make an alias of an object
Duplicating objects and making aliases

To make an alias of an object:

1  Select the object for which you want to create an alias.

2  Do one of the following:

•   Choose Edit > Make Alias.

•   Shift+Alt-drag (Windows) or Shift+Option-drag (Mac OS) the object.

See also:

To duplicate an object

To unlink an alias from the original object


To unlink an alias from the original object
Duplicating objects and making aliases

To unlink an alias from the original object:

1  Select the alias you want to unlink.

2  Choose Edit > Break Alias.

See also:

To duplicate an object

To make an alias of an object


Cutting, copying, and pasting objects and attributes
Managing Objects

Cutting, copying, and pasting objects and attributes

In addition to copying objects with the Copy and Paste commands, the Paste Special commands let you apply various attributes from one object to another. You can paste an object within any ImageStyler composition. You can cut or copy an object from ImageStyler or another application and paste it into any ImageStyler composition as text or an image object, depending on its source.

The Cut command removes an object that can then be pasted elsewhere. The Delete command removes the object permanently. It cannot then be pasted.

Importing is often a better choice for bringing images into ImageStyler from other applications. For more information, see Importing Images as Objects. For more information on alternative ways to copy, see Dragging and dropping to copy between applications.

See also:

To cut or copy an object

To paste a cut or copied object

To paste a bitmap image representation of a cut or copied object into another application

To copy and paste an object’s attributes

To delete an object


To cut or copy an object
Cutting, copying, and pasting objects and attributes

To cut or copy an object:

1  Select the objects you want to cut or copy.

2  Choose one of the following:

•   Edit > Cut to cut the object.

•   Edit > Copy to make a copy of the object.

Note: If nothing is selected, all objects in the composition are copied.

See also:

To paste a cut or copied object

To paste a bitmap image representation of a cut or copied object into another application

To copy and paste an object’s attributes

To delete an object


To paste a cut or copied object
Cutting, copying, and pasting objects and attributes

To paste a cut or copied object:

Choose Edit > Paste to place the object.

See also:

To cut or copy an object

To paste a bitmap image representation of a cut or copied object into another application

To copy and paste an object’s attributes

To delete an object


To paste a bitmap image representation of a cut or copied object into another application
Cutting, copying, and pasting objects and attributes

To paste a bitmap image representation of a cut or copied object into another application:

1  Open the application and document.

2  Choose Edit > Paste.

For more information on exporting objects into other applications, see Exporting for the Web.

See also:

To cut or copy an object

To paste a cut or copied object

To copy and paste an object’s attributes

To delete an object


To copy and paste an object's attributes
Cutting, copying, and pasting objects and attributes

To copy and paste an object’s attributes:

1  Select and copy the object whose style or attributes you want to paste onto another object.

2  Select the object (and layer if necessary) to which you want to apply the style or attributes.

3  Choose one of the following from the Edit menu:

Paste Style

Applies the style of the copied or cut object to the selected object.

Before and after style pasted from first object

Paste Special > Paste Image

Crops and scales the copied image or object to the selected object’s bounding box. If no object is selected, the image is pasted as a new object.

Before and after image pasted from first object

Paste Special > Paste Texture

Applies the copied or cut object as a texture to the selected layer. If no object is selected, the texture is applied to the background.

Before and after texture pasted from first object

Edit > Paste Active Matte

Applies the shape of the copied or cut object to the selected image object.

Note: This command works only on image objects.

Before and after active matte pasted from first object

Paste Special > Layer

Applies the attributes of the selected layer of the copied or cut object to the selected layer.

Before and after layer attributes pasted from first object

Paste Special > Transformations

Applies the rotation and skew of the copied or cut object to the selected object.

Before and after transformations pasted from first object

Paste Special > Fill

Applies the fill color, image, texture, or background, as well as the gradient, and tint of the copied or cut layer to the selected layer.

Before and after fill color pasted from first object

Paste Special > Effects

Applies the settings from the 3-D and distortion effects of the copied or cut layer to the selected layer.

Before and after effects pasted from first object

Paste Special > Properties

Applies the Properties palette settings of the copied or cut object to the selected object.

Before and after properties pasted from first object

See also:

To cut or copy an object

To paste a cut or copied object

To paste a bitmap image representation of a cut or copied object into another application

To delete an object


To delete an object
Cutting, copying, and pasting objects and attributes

To delete an object:

1  Select the object.

2  Do one of the following:

•   Choose Edit > Clear.

•   Press Backspace (Windows), Delete, or Del.

See also:

To cut or copy an object

To paste a cut or copied object

To paste a bitmap image representation of a cut or copied object into another application

To copy and paste an object’s attributes


Moving objects
Managing Objects

Moving objects

You can move objects by dragging them, using the arrow keys, and by using the Transform palette. Dragging also enables you to copy objects between open ImageStyler compositions.

For information about the Transform palette, see About transforming objects; for information about dragging, see Dragging and dropping to copy between applications.

See also:

To move an object

To move an object using the Transform palette


To move an object
Moving objects

To move an object:

1  Select the object.

2  Do one of the following:

•   Drag the object (not from a handle). Hold down the Shift key as you drag to move only horizontally or vertically.

•   Press the arrow key on your keyboard for the direction in which you want to move the object. Each press moves the object 1 pixel. Hold down the Shift key to move objects 10 pixels with each press of the arrow key.

•   Use the Transform palette as described in the procedure To move an object using the Transform palette:.

For information on moving a selected layer within an object, see Using the Object Layers palette.

See also:

To move an object using the Transform palette


To move an object using the Transform palette
Moving objects

To move an object using the Transform palette:

1  Select the object.

2  Choose Window > Transform.

3  Do any of the following:

•   To move the object horizontally (along the x axis), enter a value for X. Entering a lower number moves the object to the left; entering a higher number moves it to the right; entering 0 places it against the left edge of the work area.

•   To move the object vertically (along the y axis), enter a value for Y. Entering a lower number moves the object up; entering a higher number moves it down; entering 0 places it against the top edge of the work area.

See also:

To move an object


Stacking objects
Managing Objects

Stacking objects

The Adobe ImageStyler program stacks successively drawn objects, beginning with the first object created, opened, or imported. How objects are stacked determines how they are displayed when they overlap. In addition, stacking is important when you combine objects using the Combine commands. (See Combining objects.)

You can change the stacking order of objects in your artwork at any time.

Note: Grouping objects moves the grouped object to the front of the stack. For information on grouping objects, see Grouping objects.

See also:

To make an object the frontmost or backmost object

To move an object one level to the front or one level to the back of a stack


To make an object the frontmost or backmost object
Stacking objects

To make an object the frontmost or backmost object:

1  Select the object you want to move.

2  Choose Object > Arrange > Bring to Front, or Object > Arrange > Send to Back.

Selected object is at bottom of stack. Bring to Front command moves object to front of stack.

See also:

To move an object one level to the front or one level to the back of a stack


To move an object one level to the front or one level to the back of a stack
Stacking objects

To move an object one level to the front or one level to the back of a stack:

1  Select the object you want to move.

Note: If the object you want to select is obscured by an object above it, use the drag-selection tool ( [image]).

2  Choose Object > Arrange > Bring Forward, or Object > Arrange > Send Backward.

Selected object is at bottom of stack. Bring Forward command moves object forward one level in stack.

See also:

To make an object the frontmost or backmost object


Grouping objects
Managing Objects

Grouping objects

You can connect several objects into a group so that the objects are treated as a single unit. You can then move or transform a number of objects without affecting their individual positions or attributes. For example, you might group the objects in a navigator bar design so that you can move and scale the navigator bar as one unit.

Groups have these properties:

•   Groups can be nested—that is, they can be grouped within other objects or groups to form larger groups.

•   Grouped objects are stacked together behind the frontmost object in the group. If you group two objects that are separated by a nongrouped object in the stacking order, the nongrouped object is moved behind the grouped objects.

Three objects: front and back objects selected and then grouped

•   You can edit the frontmost text object in a group.

For information on how to select groups, see Selecting objects.

To group or ungroup objects:

1  Select the objects to be grouped or ungrouped.

2  Choose Object > Group, or Object > Ungroup.


Maintaining text alignment with grouped objects
Managing Objects

Maintaining text alignment with grouped objects

The Maintain Alignment command maintains the alignment of text with other objects to which it is grouped. When the text’s size, tracking, font, style, or text is changed, the text is realigned within the group or the objects in the group are resized as needed. For more information on changing type attributes, see Creating text objects.

For example, suppose you have a text object grouped with a small button as a label for it. With Maintain Alignment on, as you add text to the text object, the button it’s grouped with grows as needed to hold the new text.

Note: If there are aliases to the button, all the aliases will grow as well.

This option is particularly useful when performing batch replacement of HTML text, where you want the object grouped with the text to resize as necessary depending on the text you are replacing. For more information, see Using batch replace HTML.

To maintain the alignment of text with other objects to which it’s grouped:

Choose Object > Maintain Alignment.


Aligning and distributing objects
Managing Objects

Aligning and distributing objects

The Align commands let you line up selected objects along the axis you specify. You can align objects along the vertical axis, using the rightmost, center, or leftmost point of the selected objects. You can also align objects along the horizontal axis, using the topmost, center, or bottommost point of the selected objects.

Align commands: Horizontal Centers and Vertical Centers

In addition, the Distribute commands let you spread objects evenly along the horizontal axis or vertical axis.

Before and after applying Distribute > Vertical command

To align or distribute objects:

1  Select the objects to align or distribute.

2  Choose one of the following commands from the Object menu:

Align > Left

Lines up the left edges with the leftmost object.

Align > Right

Lines up the right edges with the rightmost object.

Align > Top

Lines up the top edges with the highest object.

Align > Bottom

Lines up the bottom edges with the lowest object.

Align > Horizontal Centers

Lines up the horizontal centers midway between the left edge of the leftmost object and the right edge of the rightmost object.

Align > Vertical Centers

Lines up the vertical centers midway between the top edge of the highest object and the bottom edge of the lowest object.

Align > Centers

Lines up the vertical and horizontal centers at the center of the selected objects.

Distribute > Horizontal

Spreads objects evenly along the horizontal axis so their edges are equidistant.

Distribute > Vertical

Spreads objects evenly along the vertical axis so their edges are equidistant.


Modifying Objects

About transforming objects

The Transform palette

Transforming objects

Using the Properties palette to modify geometric objects

Using alpha channels and active mattes to crop image objects

Cropping objects

Combining objects


About transforming objects
Modifying Objects

About transforming objects

You can transform selected objects—that is, change their size, location, shape, and orientation—by selecting one or more objects and then applying various transformation actions on them.

The following guidelines apply to transforming objects:

•   You can transform multiple objects simultaneously. For example, if you have several geometric and image objects selected, you can rotate them the same way around each of their center points at the same time.

•   Geometric and image objects are transformed around their center points.

•   Text objects are transformed around their justification points. For example, if the text object is a left-justified paragraph, it will rotate around the left end of the baseline of the first line of text. If it’s a right-justified paragraph, it will rotate around the right end of the baseline of the first line of text.

•   Transformations are nondestructive. You can clear all transformations applied to an object.

•   When working with images in a composition, ImageStyler keeps a copy of the original image in the file, along with any changes applied to it. As a result, even transformations to bitmap images are nondestructive. For instance, you can resize an image until it is only a few pixels across and save and close the file. If you later scale the image back to its original size, all of the pixels that originally made up the image are still there and the image looks as it did when you first imported it.

There are three ways to transform objects:

•   With the selection tools. In addition to letting you select objects, these tools let you move, rotate, skew, and resize objects by dragging.

•   With the rotate and skew tools. Once you’ve selected an object, you can use these tools to rotate or skew the object by dragging.

Note: You cannot skew groups. Also, you can only skew in one direction. That is, an object cannot be skewed both horizontally and vertically.

•   With the Transform palette. This palette lets you numerically move, rotate, and resize objects.

For information on moving objects by dragging or with the Transform palette, see Moving objects.


THE Transform PALETTE
Modifying Objects

The Transform palette

The Transform palette displays information about the location, size, and orientation of one or more selected objects. By entering new values, you can modify the selected objects. All values in the palette refer to the bounding box of the selected object. The bounding box defines the boundaries of each object.

A.	The X text box specifies the location in relation to the x axis.

B.	The Y text box specifies the location in relation to the y axis.

C.	The rotate text box specifies the angle of rotation.

D.	The W text box specifies the width.

E.	The H text box specifies the height.

F. 	The horizontal skew text box specifies the number of pixels of skewing.

G.	The vertical skew text box specifies the number of pixels of skewing.


Transforming objects
Modifying Objects

Transforming objects

The selection tools let you rotate, resize, and skew objects by dragging; the Transform palette lets you specify values for all these transformations; and the Flip commands let you flip objects to their mirror image.

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object by dragging

To resize an object using the Transform palette

To skew an object by dragging

To skew an object using the Transform palette

To flip an object

To undo all transformations applied to an object


To rotate an object by dragging
Transforming objects

To rotate an object by dragging:

1  Select the object.

2  Do one of the following:

•   Drag the top right handle of the object. (The pointer changes to a curved arrow when you are over the handle.) Shift-drag to rotate in 15° increments.

•   Ctrl-drag (Windows) or Command-drag (Mac OS) any corner handle of the object. (The pointer changes to a curved arrow indicating the rotate tool when you are over the handle.) Shift-drag to rotate in 15° increments.

•   Select the rotate tool ( [image]) and drag any corner handle of the object. (The pointer changes to a curved arrow when you are over the handle.) Shift-drag to rotate in 15° increments.

Dragging with rotate tool

See also:

To rotate an object using the Transform palette

To resize an object by dragging

To resize an object using the Transform palette

To skew an object by dragging

To skew an object using the Transform palette

To flip an object

To undo all transformations applied to an object


To rotate an object using the Transform palette
Transforming objects

To rotate an object using the Transform palette:

1  Select the object.

2  Choose Window > Transform.

3  In the bottom left area of the Transform palette, enter a positive number representing the angle to which you want to rotate the object.

See also:

To rotate an object by dragging

To resize an object by dragging

To resize an object using the Transform palette

To skew an object by dragging

To skew an object using the Transform palette

To flip an object

To undo all transformations applied to an object


To resize an object by dragging
Transforming objects

To resize an object by dragging:

1  Select the object.

2  Do one of the following:

•   Drag any corner handle except the top right one to change the height and width. (The top right handle is used for rotating.)

•   Control-drag (Windows) or Command-drag (Mac OS) to resize the object from any corner handle.

•   Shift-drag a corner handle to constrain the object’s proportions as you resize. For example, rectangles and ellipses are constrained to squares and circles, text is constrained to regular proportions but increases or decreases the font size, and images are constrained to their original aspect ratio.

•   Shift-Alt-drag (Windows) or Shift-Option-drag (Mac OS) to maintain the object’s current proportions. For example, resizing a narrow rectangle this way retains the rectangle’s height-to-width ratio.

•   Alt-drag (Windows) or Option-drag (Mac OS) a corner handle to resize from the center.

When working with aliases, resizing from the center makes all aliases maintain their alignment. You can select multiple aliases at the same time to control their resize directions.

•   To change the height only, drag the top or bottom middle handle.

•   To change the width only, drag the left or right middle handle.

Dragging to change height and then width

Dragging to change height and width proportionally

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object using the Transform palette

To skew an object by dragging

To skew an object using the Transform palette

To flip an object

To undo all transformations applied to an object


To resize an object using the Transform palette
Transforming objects

To resize an object using the Transform palette:

1  Select the object.

2  Choose Window > Transform.

3  Do any of the following:

•   To change the width, enter a value for W and press Enter (Windows) or Return (Mac OS).

•   To change the height, enter a value for H and press Enter (Windows) or Return (Mac OS).

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object by dragging

To skew an object by dragging

To skew an object using the Transform palette

To flip an object

To undo all transformations applied to an object


To skew an object by dragging
Transforming objects

To skew an object by dragging:

1  Select the object.

2  Do one of the following:

•   Control-drag (Windows) or Command-drag (Mac OS) one of the side handles (not the corner handles). Shift-Control/Command-drag to constrain the tool to multiples of 15°.

•   Select the skew tool ( [image]) and drag one of the side handles (not the corner handles). Shift-drag to constrain the tool to multiples of 15°.

Original object, and skewed horizontally and vertically

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object by dragging

To resize an object using the Transform palette

To skew an object using the Transform palette

To flip an object

To undo all transformations applied to an object


To skew an object using the Transform palette
Transforming objects

To skew an object using the Transform palette:

1  Select the object.

2  Choose Window > Transform.

3  Do any of the following in the Skew area of the Transform palette:

•   To skew the object horizontally, enter a value between -75 and 75 pixels in the horizontal skew ( [image]) text box. Entering a positive value skews the top of the object to the right and the bottom to the left; entering a negative value skews the bottom to the right and the top to the left.

•   To skew the object vertically, enter a value between -75 and 75 pixels in the vertical skew ( [image]). Entering a positive value skews the right side of the object up and the left side down; entering a negative value skews the left side up and the right side down.

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object by dragging

To resize an object using the Transform palette

To skew an object by dragging

To flip an object

To undo all transformations applied to an object


To flip an object
Transforming objects

To flip an object:

1  Select the object.

2  Choose one of the following commands:

•   Object > Transform > Flip Horizontal to flip the object’s left and right sides.

•   Object > Transform > Flip Vertical to flip the object’s top and bottom sides.

Original object, and flipped horizontally and vertically

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object by dragging

To resize an object using the Transform palette

To skew an object by dragging

To skew an object using the Transform palette

To undo all transformations applied to an object


To undo all transformations applied to an object
Transforming objects

To undo all transformations applied to an object:

1  Select the object.

2  Choose Object > Transform > Clear Transformations.

Note: For information on undoing all style attributes applied to a layer, see Removing layer attributes.

See also:

To rotate an object by dragging

To rotate an object using the Transform palette

To resize an object by dragging

To resize an object using the Transform palette

To skew an object by dragging

To skew an object using the Transform palette

To flip an object


Using the Properties palette to modify geometric objects
Modifying Objects

Using the Properties palette to modify geometric objects

The Properties palette lets you convert and modify geometric objects—those created with the rectangle, rounded-rectangle, ellipse, and polygon tools, even if they have a style applied to them. For example, you can convert an ellipse to a polygon, specify the number of sides, and choose whether to make it a solid shape or have an open center.

Solid and outline shapes

For information on using the Properties palette to change text attributes, see Setting type attributes; for information on using the Properties palette to change alpha channels on bitmap images, see Using alpha channels and active mattes to crop image objects.

To use the Properties palette to modify a geometric object’s shape:

1  Select the object.

2  Choose Window > Properties.

3  Choose one of the following shapes:

•   Rectangle to make the object a rectangle with sharp corners.

•   Rounded Rectangle to make the object a rectangle with rounded corners. For Radius, enter a value between 0 and 200 to specify the corners’ radius in 1/4 pixels. (The corner radius value represents the radius of a hypothetical circle drawn in the corner of the rectangle or square. A corner radius of zero creates square corners.)

•   Ellipse to make the object an ellipse.

•   Polygon to make the object have a specified number of straight sides. For Sides, enter a value between 3 and 10.

4  Choose whether the shape is solid or an outline:

•   Fill to make the object a solid shape.

•   Outline to hollow out the object’s shape. For Width, enter a value between 1 and 200 to specify the outline’s width in 1/4 pixels.

Note: Although a computer monitor does not display objects in 1/4-pixel resolution, the 1/4-pixel value helps determine how anti-aliasing is applied to the object, to give the appearance finer or heavier lines.

Shapes: filled, outline 10 1/4-pixels wide, and outline 20 1/4- pixels wide


Using alpha channels and active mattes to crop image objects
Modifying Objects

Using alpha channels and active mattes to crop image objects

The Properties palette lets you crop images imported into ImageStyler. For example, you can use this palette to apply a matte to an image object. This action crops the image object to the shape of the matte. A matte that is currently applied to an image object is called the active matte.

Image object, matte, and with matte applied to image object

Depending on the format and how the image was created, an image may contain an alpha channel. This is a grayscale image that is added to the color channels (such as the red, green, and blue channels in an RGB image) that make up the image.

You can use an alpha channel to create and store a matte. As with a matte, an alpha channel enables you to define a shape for the image object, rather than always display the image object in a rectangle. For example, an image of a shoe displayed without an alpha channel might be shown in a white rectangle. By using an alpha channel in the shape of that shoe, only the shoe appears in the image object.

Original image with alpha channel and without

For information on importing images, see Importing Images as Objects. For information on using the Properties palette to change type attributes, see Setting type attributes; for information on using the Properties palette to change geometric objects, see Using the Properties palette to modify geometric objects.

See also:

To use alpha channels and mattes to crop image objects


To use alpha channels and mattes to crop image objects
Using alpha channels and active mattes to crop image objects

To use alpha channels and mattes to crop image objects:

1  Select the image object.

2  Choose Window > Properties.

3  For Alpha Channel, choose one of the following:

•   No Alpha if you want the image to remain a rectangular shape out to the edges of the selection border. If the image is not rectangular, the remaining area out to the edges of the selection border is filled with white.

•   Use Alpha Channel to use the image’s alpha channel as a matte, if the image was imported with one.

•   Build Alpha From Image to create an alpha channel using the luminosity of the color in the image. With color images, the effect is equivalent to converting the color to grayscale, and using the grayscale as the alpha channel. However, this option is most useful for removing the white background from simple, black and white line drawings and for using a grayscale drawing as a shape.

•   Active Matte to use a shape to crop the image. You can add an active matte by using the Matte option in the Shapes palette. You can also add an active matte by dragging a shape from the Shapes palette or an EPS file from a folder onto the Active Matte preview box in the Properties palette. The active matte’s shape is scaled to the size of the image. For information on the Shapes palette, see About shapes.

Note: If the image has a native alpha channel, the active matte is intersected with it.


Cropping objects
Modifying Objects

Cropping objects

The crop tool crops objects by reducing the visible portion of an object. It also lets you move a bitmap image within a matte.

An object that has been cropped can be uncropped at any time, even after the file has been closed and reopened, by using the crop tool to extend the visible area back to its original boundaries.

See also:

To crop an object using the crop tool


To crop an object using the crop tool
Cropping objects

To crop an object using the crop tool:

1  Select the object you want to crop.

2  Select the crop tool ( [image]).

3  Crop the image:

•   Position the pointer over one of the handles on the selected object. The pointer changes to a set of direction arrows. Then drag to resize the visible part of the object.

Dragging crop tool over selected object and result

•   Position the pointer inside the selected object. The pointer changes to a hand tool. Then dragto move the visible part of the image within the matte.


Combining objects
Modifying Objects

Combining objects

The Combine commands build new objects formed by the intersections of objects.

The combined object consists of two or more overlapping objects combined into a single image object. Using the Combine commands enables you to create objects that have transparent interior spaces where the original objects overlapped (for example, a window frame or a donut shape). This method lets you create objects more complex than you could easily create using the drawing tools.

Combine effects

•   Unite

•   Unite with Color

•   Minus Front

•   Intersect

•   Exclude

A combined object has these properties:

•   The objects created by the Unite, Minus Front, Intersect, and Exclude commands have the same style attributes as the bottommost object being combined. (See Stacking objects.)

•   The combined objects are an image object.

•   If a text object is part of the combined object, the text can still be edited. If more than one text object is part of the combined object, only the topmost text object can be edited.

•   You can uncombine objects in an ImageStyler file at any time, even after the file has been closed and reopened. The separate objects retain their separate style attributes.

See also:

To create a combined object

To uncombine a combined object


To create a combined object
Combining objects

To create a combined object:

1  Make sure the objects you want to see through are in front of the background object in the stacking order.

2  Select all of the objects you want to include in the combined object.

3  Choose Object > Combine.

4  Choose one of the following Combine commands:

Unite

Creates a single image object from two or more objects, retaining the style of the backmost object. It traces the outline of all selected objects as if they were a single, merged object.

Unite with Color

Creates a single image object from two or more objects, retaining the styles of the separate objects. It traces the outline of all selected objects as if they were a single, merged object.

Minus Front

Creates a single image object by subtracting the frontmost objects from the backmost object. You can use this command to delete areas of the objects by adjusting the stacking order. For more information, see Stacking objects.

Intersect

Creates a single image object from the common area shared by the selected objects. It traces the outline of all overlapping shapes in the selected objects, ignoring any nonoverlapping areas.

Exclude

Creates a single image object by knocking out the area where one shape overlaps another. It traces all nonoverlapping areas of the selected objects, making overlapping areas transparent. In the areas where an even number of objects overlap, the overlap is made transparent; anywhere an odd number of objects overlap, the overlap is filled.

See also:

To uncombine a combined object


To uncombine a combined object
Combining objects

To uncombine a combined object:

1  Select the combined object.

2  Choose Object > Uncombine.

See also:

To create a combined object


Applying Styles and Layers to Objects

About styles

Applying styles

About Layers

Understanding Layers

Using the Object Layers palette

Using the Layer palette


About styles
Applying Styles and Layers to Objects

About styles

A style is an entire set of attributes for an object, except for the type of object (geometric, text, or image), its shape, and any transformations or Web palette settings applied to it. A style’s attributes include settings from various palettes in ImageStyler.

The Styles palette lets you save and apply styles to any object.

Original objects, and with different styles applied

The following guidelines apply to styles:

•   Styles can be applied to any object in ImageStyler—geometric objects created with the drawing tools, type objects created with the type tool, and image objects created with the Shapes palette, Combine commands, or imported bitmap images.

•   A style contains one to five layers that maintain the shape and type of object to which you apply the style.

•   Each layer in a style has any combination of color, background fill, texture, 3-D effect, distortion effect, gradient, opacity, and any attributes set in the Filter and Layer palettes. For more information, see About Layers.

•   You can save and name the style of an object in the Styles palette and then apply it to other objects. When you save an object’s style, all of the attributes that make up the object are saved in that style except its shape and the type of object it is.

•   If the top layer of the style in the Styles palette is gray, this indicates that applying the style will leave the top layer of the object filled with its current color, image, background, or texture.

•   Each style is a file in the Styles folder within the ImageStyler folder.

•   You can also copy and paste styles and individual style attributes. For more information, see Cutting, copying, and pasting objects and attributes.

•   In addition to applying entire styles, you can create and modify the attributes individually, as described in About Layers.


Applying styles
Applying Styles and Layers to Objects

Applying styles

The Styles palette enables you to apply styles to one or more objects.

See also:

To display the Styles palette

To add a style to the palette

To add a style to the palette by placing it in the Styles folder

To replace a style in the palette

To delete a style from the palette


To display the Styles palette
Applying styles

To display the Styles palette:

1  Choose Window > Styles.

2  Choose a view for the sample Styles:

•   Swatches View to display a scrollable list of thumbnail examples of styles.

•   Preview View to display a scrollable named list of styles along with a large thumbnail for the currently selected style.

•   Name View to display a scrollable list of named styles with a small thumbnail example of each.

•   To apply a style to an object:

3  Select the object to which you want to apply the style.

4  Apply the style from the Styles palette:

•   Select the style you want from the list. Then click Apply in the palette, or press Enter (Windows) or Return (Mac OS).

•   Double-click the style from the list.

•   Drag the style onto an existing object to give the object that style. The object displays selection handles when it is selected.

See also:

To add a style to the palette

To add a style to the palette by placing it in the Styles folder

To replace a style in the palette

To delete a style from the palette


To add a style to the palette
Applying styles

To add a style to the palette:

1  Select an object whose style you want to save.

2  Do one of the following:

•   Click the New button ( [image]) on the Styles palette.

•   Drag the object onto the Styles palette.

3  In the dialog box that appears, enter the name you want to give the style.

4  Select Ignore Color of First Layer to retain the fill attribute of the top layer to which you apply the style.

5  Click OK.

The style is placed in alphabetical order in the list of available styles.

See also:

To display the Styles palette

To add a style to the palette by placing it in the Styles folder

To replace a style in the palette

To delete a style from the palette


To add a style to the palette by placing it in the Styles folder
Applying styles

To add a style to the palette by placing it in the Styles folder:

1  If you want to rename the ImageStyler style file, you can use the Explorer (Windows) or Finder (Mac OS) to give it the name you want to appear in the Styles palette. However, for the file to be recognized in Windows, the file should end in the extension .ist.

2  Place the file into the Styles folder located in the ImageStyler folder.

The style is placed in alphabetical order in the list of available styles the next time you start ImageStyler.

To share styles with other users, create the style and provide them with a copy of the file from the Styles folder.

See also:

To display the Styles palette

To add a style to the palette

To replace a style in the palette

To delete a style from the palette


To replace a style in the palette
Applying styles

To replace a style in the palette:

1  Add a style as described in this section, but name it the same as an existing style.

See also:

To display the Styles palette

To add a style to the palette

To add a style to the palette by placing it in the Styles folder

To delete a style from the palette


To delete a style from the palette
Applying styles

To delete a style from the palette:

1  In the Styles palette, select the style you want to delete.

2  Click the Trash button ( [image]).

Note: Deleting a style erases it from your hard drive. This action cannot be undone.

See also:

To display the Styles palette

To add a style to the palette

To add a style to the palette by placing it in the Styles folder

To replace a style in the palette


About Layers
Applying Styles and Layers to Objects

About Layers

When you create an object in ImageStyler, it consists of at least one layer. You can add up to four more layers to the object, all sharing the same shape.

By applying different attributes to each layer, you can create sophisticated elements for your Web page design, such as arrows that have an embossed shape on the top layer and a drop shadow on the bottom layer.

Each layer is independent of the other layers in the object. This means you can use the different layers to experiment freely with various fills and effects. It also enables you to create alternate versions of the same object. For instance, you could use the second layer for an alternative color for a button.

The number of layers and the attributes applied to them can then be saved and applied to other objects as styles. For more information on styles, see About styles.

You can select and fill any layer with one of the following attributes:

Color fill

This includes settings from the Color and Gradient palettes. For more information, see Applying Color, Textures, and Effects to Layers.

Image fill

Any layer in an image object can be filled with that image. For more information, see Using the Layer palette.

Background fill

Any layer can be filled with the object or background below the object. For more information, see Using the Layer palette.

Texture fill

This can be any texture from the Texture palette. For more information, see Applying textures to layers.

In addition, you can apply any combination of these attributes to a layer:

3-D effect

This includes effects such as embossing and bevelling the layer. For more information, see Applying 3-D effects to layers.

Distortion effect

This includes effects such as spherizing and twirling the fill on that layer. For more information, see Applying 3-D effects to layers.

Opacity palette settings

These adjust the level of transparency for the layer. For more information, see Adjusting opacity.

Filters palette settings

These adjust the color information in the layer. For more information, see Using the Filters palette to modify colors.

Layer palette settings

These let you offset the layers from one another to display the various layers, as well as widen, narrow, and blur any layers in the object. For more information, see Using the Layer palette.


UNDERSTANDING LAYERS
Applying Styles and Layers to Objects

Understanding Layers

Think of layers as copies of the object’s shape stacked one on top of the other. In objects that are made up of multiple layers, the same shape is repeated on each layer, but with different attributes. Where one layer is offset from the layers below or is semitransparent, you can see the lower layers. Behind all of the layers in the object are other objects or the background.

A texture is on the topmost layer.

Nonoverlapping areas on a layer let you see through to the layers below.


Using the Object Layers palette
Applying Styles and Layers to Objects

Using the Object Layers palette

To change a layer’s attributes, you have to select it first. The Object Layers palette enables you to select, create, hide, display, copy, and delete layers. (Additional commands appear in the Layer menu.)

The Object Layers palette lists all layers that make up an object, starting with the topmost layer. A small preview of each layer appears in the palette and is updated as you edit.

The Shapes, Styles, Properties, and Transform palettes affect all layers in the selected object. The Layer, Color, Opacity, Filters, Distort, 3-D, Gradient, and Textures palettes affect only the selected layer of the selected object.

To display the Object Layers palette:

Choose Window > Show Object Layers.

To select a layer:

Do one of the following:

•   In the Object Layers palette, click a layer to select it.

•   Choose Layer > Select Layer, and choose the name of the layer you want.

See also:

Viewing layers

Changing the stacking order of layers

Adding layers

Duplicating layers

Removing layer attributes


Viewing layers
Using the Object Layers palette

Viewing layers

With the Object Layers palette, you can control whether a layer is visible and how a preview or thumbnail of its contents is displayed. Reducing the size of the thumbnails can save monitor space. Only visible layers are exported and printed.

See also:

To show or hide a layer

To change the display of layer thumbnails


To show or hide a layer
Viewing layers

To show or hide a layer:

Do one of the following:

•   In the Object Layers palette, click the eye icon next to a layer to hide that layer. Click in the column again to redisplay the layer.

•   Alt-click (Windows) or Option-click (Mac OS) the eye icon for a layer to display just that layer. Alt/Option-click in the eye column again to redisplay all the layers.

Note: You can make the selected layer invisible. Keep in mind, however, that changes still affect the hidden, selected layer.

Bottom layer hidden

See also:

To change the display of layer thumbnails


To change the display of layer thumbnails
Viewing layers

To change the display of layer thumbnails:

Choose a display option from the menu on the Object Layers palette:

•   Normal View to display a scrollable list of named layers with a thumbnail example of each.

•   Short View to display a scrollable list of named layers with a smaller thumbnail example of each.

•   Narrow View to display a scrollable list of thumbnail examples of layers, without names.

•   Big View to display a scrollable list of named layers with a large thumbnail example of each.

See also:

To show or hide a layer


Changing the stacking order of layers
Using the Object Layers palette

Changing the stacking order of layers

The stacking order determines whether a layer appears in front of or behind the other layers that make up the object.

See also:

To change the order of layers with the Layers menu

To change the order of layers by dragging


To change the order of layers with the Layers menu
Changing the stacking order of layers

To change the order of layers with the Layers menu:

1  In the Object Layers palette, select the layer that you want to move.

2  Choose Layer > Arrange, and choose a command to arrange the layer:

•   Bring Forward to move the layer one level up in the stacking order.

•   Bring to Front to make the layer the topmost layer.

•   Send Backward to move the layer one level down in the stacking order.

•   Send to Back to make the layer the bottommost layer in the object.

See also:

To change the order of layers by dragging


To change the order of layers by dragging
Changing the stacking order of layers

To change the order of layers by dragging:

1  In the Object Layers palette, select the layer that you want to move.

2  Drag the layer up or down in the palette. When the outline of the layer you are dragging appears in the position you want, release the mouse button.

Original object

Topmost layer dragged below Bottommost layer

See also:

To change the order of layers with the Layers menu


Adding layers
Using the Object Layers palette

Adding layers

Newly added layers appear below the selected layer in the Object Layers palette. You can add layers to an object (an object can have up to five layers), name new layers, and rename existing ones.

See also:

To add a new layer

To name or rename a layer


To add a new layer
Adding layers

To add a new layer:

1  Do one of the following:

•   Choose Layer > New Layer.

•   Click the New Layer button ( [image]) at the bottom of the Object Layers palette.

The layer is named according to its order in the stack of layers.

See also:

To name or rename a layer


To name or rename a layer
Adding layers

To name or rename a layer:

1  In the Object Layers palette, double-click the layer.

2  Enter the name you want to give the layer and click OK.

See also:

To add a new layer


Duplicating layers
Using the Object Layers palette

Duplicating layers

You can duplicate any layer within the same object, as long as there are no more than four layers in the object. The new layer appears below the original and is automatically selected.

See also:

To duplicate a layer

To delete a layer


To duplicate a layer
Duplicating layers

To duplicate a layer:

1  If you have five layers (the maximum), delete a layer.

2  In the Object Layers palette, select the layer you want to duplicate.

3  Duplicate the layer:

•   Choose Layer > Duplicate Layer.

•   Click the Duplicate Layer button ( [image]) at the bottom of the Object Layers palette.

For information on naming the layer, see Adding layers.

See also:

To delete a layer


To delete a layer
Duplicating layers

To delete a layer:

1  Select the layer in the Object Layers palette.

2  Delete the layer:

•   Choose Layer > Delete Layer.

•   Click the Trash button ( [image]) at the bottom of the Layers palette.

See also:

To duplicate a layer


Removing layer attributes
Using the Object Layers palette

Removing layer attributes

The Clear Layer Attributes command removes any gradient, opacity, color adjustment, texture, image, 3-D effect, distortion, offset, or softness attributes applied to the layer. The resulting layer is filled with the current color.

To remove the attributes of a layer:

1  Select the layer in the Object Layers palette.

2  Choose Layer > Clear Layer Attributes.


Using the Layer palette
Applying Styles and Layers to Objects

Using the Layer palette

The Layer palette lets you specify several basic properties for the selected layer. For each layer, you can specify the following:

•   Fill specifies whether the layer is filled with a color, texture, image, or the background.

•   X Offset and Y Offset specify how far to move the layer from the object’s center. For example, this is useful for creating a drop shadow layer that is below and to the right of the top layer.

•   Width specifies how much to widen or narrow a layer. For instance, in an object that has two layers, you can use this option to widen the bottom layer, creating an outline, or stroke, around the object.

•   Softness specifies how much gaussian blur to add to the layer. This is useful for creating shadows with soft edges, for example.

See also:

To specify the fill for a layer

To specify the softness of a layer

To offset a layer with the Layer palette

To offset a layer by dragging

To widen or narrow a layer


To specify the fill for a layer
Using the Layer palette

To specify the fill for a layer:

1  Select the layer.

2  Choose Window > Layer.

3  Choose one of the following from the Fill with menu:

•   Color fills the layer with the current color, opacity, and gradient as specified in the Color, Opacity, and Gradient palettes. For information, see Applying Color, Textures, and Effects to Layers.

•   Image applies to image objects only, and fills the layer with the image’s color information. For instance, if the image is of a boat, the layer is filled with the boat; if the image is a default shape from the Shapes palette, the layer is filled with black or gray because shapes typically use only grayscale. Choosing this option for a geometric object or text object leaves the layer filled with the current color.

•   Background fills the layer with whatever is beneath the entire object, whether it’s another object or the background. For more information, see Choosing the foreground (layer) and background color.

Use the Filters, 3-D, and Distortion palettes for interesting effects when filling a layer with the background.

•   Texture fills the layer with any texture applied to it. If no texture is currently applied, the shape remains filled with the current color, opacity, and gradient. For information, see Applying textures to layers.

Top layer filled with A. Color, B. Image, C. Background, and D. Texture

See also:

To specify the softness of a layer

To offset a layer with the Layer palette

To offset a layer by dragging

To widen or narrow a layer


To specify the softness of a layer
Using the Layer palette

To specify the softness of a layer:

1  Select the layer.

2  Choose Window > Layer.

3  For Softness, enter a value between 0 and 10 to specify the amount of gaussian blur. Entering a higher value increases the amount by which the edge of the layer fades into transparency.

See also:

To specify the fill for a layer

To offset a layer with the Layer palette

To offset a layer by dragging

To widen or narrow a layer


To offset a layer with the Layer palette
Using the Layer palette

To offset a layer with the Layer palette:

1  Select the layer.

2  Choose Window > Layer.

3  Offset the layer from the center of the object by a specific number of pixels:

•   To move the object horizontally from the center, enter an X Offset value between -50 and 50 pixels. Entering a negative value moves the layer to the left; entering a positive value moves it to the right.

•   To move the object vertically from the center, enter a Y Offset value between -50 and 50 pixels. Entering a negative value moves the layer up; entering a positive value moves it down.

See also:

To specify the fill for a layer

To specify the softness of a layer

To offset a layer by dragging

To widen or narrow a layer


To offset a layer by dragging
Using the Layer palette

To offset a layer by dragging:

1  Select the layer.

2  Do one of the following:

•   Select the layer-offset tool ( [image]) and drag.

•   Hold down Ctrl (Windows) or Command (Mac OS) and drag over the center of the object.

See also:

To specify the fill for a layer

To specify the softness of a layer

To offset a layer with the Layer palette

To widen or narrow a layer


To widen or narrow a layer
Using the Layer palette

To widen or narrow a layer:

1  Select the layer.

2  Choose Window > Layer.

3  For Width, enter a value between -10 and 10 pixels. Entering a negative value narrows the layer; entering a positive value widens it.

See also:

To specify the fill for a layer

To specify the softness of a layer

To offset a layer with the Layer palette

To offset a layer by dragging


Applying Color, Textures, and Effects to Layers

Choosing the foreground (layer) and background color

Specifying colors with the Color palette

Copying colors and styles with the eyedropper and paint bucket

Using the Filters palette to modify colors

Creating gradients

Adjusting opacity

Applying textures to layers

Applying 3-D effects to layers

Applying distortion effects to layers


Choosing the foreground (layer) and background color
Applying Color, Textures, and Effects to Layers

Choosing the foreground (layer) and background color

Adobe ImageStyler uses the foreground color to fill the selected layer in a selected object and the background color to fill the background against which the object appears. Once you’ve selected whether you want to fill a layer or the background, you can specify a color with the Color palette or the eyedropper tool, or even apply a texture with the Textures palette. For information on textures, see Applying textures to layers.

The current foreground (layer) color and background color are the default colors that will be used in any composition until you choose different colors.

The current foreground (layer) color appears in the top color selection box, the background color in the lower box in both the toolbox and the Color palette. For information on using the Color palette, see Specifying colors with the Color palette. The default foreground color is black, and the default background color is white.

A. Foreground (layer) color B. Background color

To change the foreground (layer) or background color:

1  Choose the foreground (layer) or background:

•   To change the foreground (layer) color, click the foreground (layer) color box or select an object and layer you want to color.

•   To change the background color, click the background color box. This action selects the background and deselects any object currently selected.

2  Choose a color, gradient, or texture:

•   Choose a color, as explained in Specifying colors with the Color palette.

•   Sample a color, as explained in Copying colors and styles with the eyedropper and paint bucket.

•   Make a gradient, as explained in Creating gradients.

•   Choose a texture, as explained inApplying textures to layers.


Specifying colors with the Color palette
Applying Color, Textures, and Effects to Layers

Specifying colors with the Color palette

The Color palette displays the color values for the current foreground (layer) and background colors. Using the sliders in the Color palette, you can edit the foreground and background colors according to several different color models. You can also choose a color from the spectrum of colors displayed in the color bar.

A. Foreground color B. Background color C.Web colors D. Slider E. Color bar F. Color palette menu

See also:

To specify a color using the Color palette


To specify a color using the Color palette
Specifying colors with the Color palette

To specify a color using the Color palette:

1  Select what you want to edit:

•   To edit the foreground (layer) or background color, select the foreground (layer) color or background color box in the toolbox or Color palette. For more information, see Choosing the foreground (layer) and background color.

•   To apply the color directly to an object, select the object and layer.

•   To apply the color directly to the background, select the background color box in the toolbox or Color palette.

•   To color or tint a layer in an object, use the Layer palette to fill the layer with the color, a texture, the background, or an image. (See Using the Layer palette.) For information on applying a tint of a color, see Using the Filters palette to modify colors.

Use the eyedropper tool to sample a color that’s close to the one you want. The sampled color replaces the color currently in the Color palette.

2  Choose Window > Color.

3  From the Color palette menu at the top right of the palette, choose the color model you want to use for color readout values:

Saturation View

Sometimes called chroma, saturation is the strength or purity of the color. Saturation represents the amount of gray in proportion to the hue, measured as a percentage from 0% (gray) to 100% (fully saturated). On the standard color wheel, saturation increases from the center to the edge.

A. Green B. Yellow C. Red D. Magenta F. Blue F. Cyan

Value View

Represents the relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

Hue View

Represents the color reflected from or transmitted through an object. It is measured as a location on the standard color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color such as red, orange, or green.

HSB View

Consists of hue (color) values from 0° to 360° and saturation (the strength or purity of the color) and brightness (lightness or darkness of the color) values from 0% to 100%. The angle for hue is defined as an angle relative to pure red on the color wheel.

RGB View

Assigns an intensity value to colors ranging from 0 (black) to 255 (white) for each of the red, green, and blue (RGB) components in a color image.

4  Select the cube in the Color palette to limit the color options to the 216 “Web-safe” colors. This is the set of colors most often used by Web browsers to display 8-bit images. This set is a subset of the Windows and Mac OS system palettes.

Note: Non-Web-safe colors can be generated by applying distortion or 3-D effects, tints, or gradients to objects.

5  To specify a new color:

•   Drag the color sliders.

•   Enter values next to the color sliders.

•   Position the pointer over the color bar and click to sample a color.

•   To specify a new Hue, Saturation, or Value color, use the color slider and the color field to select a color. The vertical color slider displays the range of color levels available for the selected color (for example, Hue). The color field displays the range for the remaining two components—one on the horizontal axis, one on the vertical (in this example, Saturation and Value).


Copying colors and styles with the eyedropper and paint bucket
Applying Color, Textures, and Effects to Layers

Copying colors and styles with the eyedropper and paint bucket

The eyedropper tool lets you sample color from anywhere on your desktop. This means you can sample the color of any object or the background in your composition, or from another application entirely. You can then use the paint bucket tool to apply the current color to the top layer of an object.

Together these tools let you copy the color from an object, the background, or anywhere else on your desktop to another object or the background in your composition.

You can also use these tools to copy and apply styles from within the composition window. For information on copying attributes such as the style or current fill using the Paste commands, see Cutting, copying, and pasting objects and attributes.

See also:

To sample a color or style using the eyedropper tool

To apply a color or style using the paint bucket tool


To sample a color or style using the eyedropper tool
Copying colors and styles with the eyedropper and paint bucket

To sample a color or style using the eyedropper tool:

1  Choose where you want to apply the sampled color or style:

•   To change the foreground (layer) color and apply it or a style to an object as you sample, select the object and layer.

•   To change the background color, click the background color box in the toolbox or Color palette.

•   To change the foreground (layer) color without applying it or a sampled style to any object, deselect any selected objects. Then make sure the foreground (layer) color box is selected in the toolbox or Color palette.

2  Select the eyedropper tool ( [image]).

3  Select a color or style:

•   Click in the composition window where you want to sample a color from an object or the background.

•   Drag the eyedropper tool to continuously sample colors from inside or outside the composition window. (To sample colors from outside the composition window, begin dragging from inside the window.) Release the mouse button to select the color as the new color.

Note: Sampled colors in your composition are taken from the actual color of the objects and background, not the color displayed if you are viewing them in Active Preview.

•   Shift-click to sample the style of an object. A white bar appears across the eyedropper tool. For more information on styles, see About styles.

•   Shift-drag to continuously sample the style of objects. Release the mouse button to select the new style.

As you use the eyedropper tool, the color in the foreground (layer) or background color box, Color palette, and any selected object changes dynamically.

See also:

To apply a color or style using the paint bucket tool


To apply a color or style using the paint bucket tool
Copying colors and styles with the eyedropper and paint bucket

To apply a color or style using the paint bucket tool:

1  Select the paint bucket tool ( [image]).

2  Apply the color or style:

•   Click an object or the background to select it and paint it with the current color in the Color palette. If you select an object, the top layer is painted.

•   Shift-click an object to select it and apply the last style sampled with the eyedropper tool. A vertical gray bar appears at the lip of the paint bucket tool.

See also:

To sample a color or style using the eyedropper tool


Using the Filters palette to modify colors
Applying Color, Textures, and Effects to Layers

Using the Filters palette to modify colors

The Filters palette lets you adjust color attributes on any layer of an object or the background. You can change the brightness, contrast, saturation, or tint of colors. In addition, you can limit the number of colors for a posterized effect and invert colors.

Depending on what you choose in the Layer palette, a layer can be filled with color, an image, a texture, or the background. For more information, see Using the Layer palette.

The effect of the Filters palette varies, based on what the layer is filled with:

•   If the layer is filled with a color, it is generally simpler to choose a different color from the Color palette than adjust it with the Filters palette. Otherwise, the color is just shifted to another color you could have picked from the Color palette.

•   If the layer is filled with an image or texture, the Filter palette alters the entire range of colors in the texture or image. The palette is most useful on these kinds of fills.

•   If the layer is filled with the background, the Filter palette lets you easily change the color of the background or objects seen through that layer, creating an effect similar to looking through a colored lens.

•   If the layer is filled with the background, the Filter palette lets you easily change the color of anything seen through that layer, creating an effect similar to looking through a colored lens.

To adjust colors using the Filters palette:

1  Select the object and layer.

2  Choose Window > Filters.

3  Choose a color adjustment:

•   For Brightness, enter a value between -255 and 255. Entering a negative value darkens the layer; entering a positive value lightens it.

Original, and with brightness increased

•   For Contrast, enter a value between -128 and 128. Entering a negative value decreases the contrast on the layer; entering a positive value lightens it. This effect is most noticeable if the layer is filled with an image, texture, or background.

Original, and with contrast increased

•   For Saturation, enter a value between -128 and 128. Entering a negative value increases the amount of gray in proportion to the hue; entering a positive value decreases the amount of gray in proportion to the hue.

Original, and with saturation increased

•   For Tint, enter a value between 0 and 255 to blend the current foreground color in the Color palette with the current fill for the selected layer. Entering a higher number increases the amount of tint added to the fill. This option is not available if the layer is filled with a color from the Color palette.

Original, and with tint increased

•   For Posterize, enter a value between 0 and 30 to specify the number of colors. Entering 0 leaves a full range of colors in the layer. Entering 1 leaves one color in the layer; entering 30 leaves 30 colors. For example, using just a few colors for a bitmap image can change a continuous-tone image such as a photograph into areas of flat color, making the photo look like a painted poster.

Original, and with posterization increased

•   Select Invert to invert the colors. You might use this command to make a positive black-and-white image negative or to make a positive from a scanned black-and-white negative. The normal, noninverted color is displayed in the foreground (layer) color box and background color box in the toolbox and Color palette, because it is this color that is currently inverted.

Note: Because negative color film contains an orange mask in its base, the Invert command cannot make positives from scanned color negatives.

When you invert a color, the brightness value of each component of that color is converted to the inverse value on the color range slider (it shifts colors to their opposite on the color wheel). For example, the inverse of a color whose red is 255 is 0.

Original, and with colors inverted


Creating gradients
Applying Color, Textures, and Effects to Layers

Creating gradients

The Gradient palette lets you create a gradual blend between two colors in a layer. The gradient is applied to the entire active layer of the selected object.

A. No Gradient B. Linear C. Burst D. Double Burst E. Radial gradient

The Gradient palette lets you select the starting and ending colors, as well as the relative distance from the edges of the object where the starting color begins blending to the ending color.

A. Starting color stop B. Blending occurs between starting and ending color stops C. Ending color stop D. Resulting object

To apply a gradient:

1  Select the background (by clicking the background color box in the toolbox or Color palette) or an object and layer.

2  Choose Window > Gradient.

3  Choose the kind of gradient you want:

No Gradient

Applies no gradient.

Linear

Shades in a straight line from one edge of the object to the other.

Burst

Shades using symmetric linear gradients on either side of the center.

Double Burst

Shades using two symmetric burst gradients, at right angles to each other, each moving from the center to the edge of the object.

Radial

Shades from the center to the edge in a circular pattern.

4  To define the starting color of the gradient, click the left color stop under the gradient bar. (This color is the object color by default.) The square below the stop is outlined, indicating that the starting color is being edited.

5  Do one of the following:

•   Use the eyedropper tool to sample and apply a color.

•   Use the Color palette to specify a color.

6  To define the ending color, click the right color stop under the gradient bar. (This color is black by default.) Then choose a color as described in the previous step.

7  To adjust the location of the starting point or ending point of the gradient, drag the corresponding color stop left or right to the location you want.

8  Select Relative to rotate the gradient when you rotate the object.

Original, and rotated with Relative option on

Original, and rotated with Relative option off

9  Enter a value between 0° and 359° to specify the angle at which to apply the gradient. A preview of the gradient is displayed in the gradient angle indicator.


Adjusting opacity
Applying Color, Textures, and Effects to Layers

Adjusting opacity

The Opacity palette lets you specify the opacity of any layer. That is, you can control how transparent the layer is.

The opacity can be applied to the entire layer evenly, or as a gradient. For example, you can set the starting opacity to 100% and have the fill gradually blend into an ending opacity of 50%.

A. 100% opacity B. 30% opacity on all layers C. Gradient fading from 100% to 0% opacity

The gradient options in the Opacity palette let you select the starting and ending opacity, as well as the relative distance from the edges of the object where the starting opacity begins blending to the ending opacity.

A. Starting opacity stop B. Blending occurs between starting and ending opacity stops C. Ending opacity stop D. Resulting object

See also:

To specify the opacity

To apply a gradient to the opacity setting


To specify the opacity
Adjusting opacity

To specify the opacity:

1  Select the object and layer.

2  Choose Window > Opacity.

3  For Opacity, enter a value between 0 and 100. A value of 0 makes the object completely transparent; a value of 100 makes it completely opaque.

See also:

To apply a gradient to the opacity setting


To apply a gradient to the opacity setting
Adjusting opacity

To apply a gradient to the opacity setting:

1  Specify the starting opacity as described in the procedures for specifying opacity.

2  Choose the kind of gradient you want:

No Gradient

Applies no gradient.

Linear

Shades in a straight line from one edge of the object to the other.

Burst

Shades using symmetric linear gradients on either side of the center.

Double Burst

Shades using two symmetric burst gradients, at right angles to each other, each moving from the center to the edge of the object.

Radial

Shades from the center to the edge in a circular pattern.

In the opacity gradient bar, black represents an opacity of 100% (fully opaque); white an opacity of 0% (fully transparent), and gray an opacity between 0 and 100% (semitransparent). The bar at the bottom of the palette lets you preview the effects of the opacity gradient.

3  To define the starting opacity of the gradient, click the left gradient stop under the gradient bar. The square below the stop is outlined, indicating that the starting color is being edited.

4  Enter an opacity value for the starting opacity.

5  To define the ending opacity, click the right opacity stop under the gradient bar. Then choose an opacity as described in the previous step.

6  To adjust the location of the starting point or ending point, drag the corresponding opacity stop left or right to the location you want.

7  Select Relative to rotate the gradient when you rotate the object.

Original, and rotated with Relative option on

Original, and rotated with Relative option off

8  Enter a value between 0° and 359° to specify the angle at which to apply the gradient. The preview of the gradient is displayed in the gradient angle indicator.

See also:

To specify the opacity


Applying textures to layers
Applying Color, Textures, and Effects to Layers

Applying textures to layers

The Textures palette lets you apply a repeating—or tiled—texture or pattern to any layer of an object or the background. Because textures are image files and can be in any file format that ImageStyler can import, you can add your own textures to the palette as well as use the ones provided.

Original, and with different textures applied to top layer

You can also directly apply a bitmap image as a texture to an object or the background.

Original object and bitmap image, and with image appliedto top layer of object

For information on layers, see Using the Layer palette; for information on acceptable file formats, see Importing Images as Objects; for information on copying and pasting a bitmap image or texture from one object to another, see Cutting, copying, and pasting objects and attributes.

You can use the same texture in the background of your ImageStyler composition as you do in your Web page. This can help you when composing objects in ImageStyler by showing you what they will look like when placed on the Web page. It can also make objects you export in GIF format look better against the background of your Web page, because ImageStyler automatically sets the transparency and edges of the exported objects to blend with the background texture.

Because different Web browsers offset individual imported images differently against the background, this works best if you export a composition as an entire page rather than as separate images.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To display the Textures palette
Applying textures to layers

To display the Textures palette:

1  Select the background or an object and layer to which you want to apply the texture.

2  Choose Window > Textures.

3  Choose a display option from the menu on the Textures palette:

•   Swatches View to display a scrollable list of thumbnail examples of textures.

•   Preview View to display a scrollable named list of textures along with a large thumbnail for the currently selected texture.

•   Name View to display a scrollable list of named textures with a small thumbnail example of each.

See also:

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To apply a texture using the Textures palette
Applying textures to layers

To apply a texture using the Textures palette:

1  Select the background (by clicking the background color box in the toolbox or Color palette) or an object and layer.

2  Apply the texture from the Textures palette:

•   Select the texture you want from the list (you can type a texture’s name to select it). Then click Apply in the palette or press Enter (Windows) or Return (Mac OS).

•   Double-click the texture from the list.

•   Drag the texture onto an existing object to apply the texture to the selected layer. The existing object displays selection handles when it is selected.

•   Drag the texture onto a layer in the Object Layers palette to apply the texture to the selected layer.

•   Drag the texture onto the background to apply the texture to the background.

See also:

To display the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To apply a texture to a layer by dragging an image file from a folder or directory
Applying textures to layers

To apply a texture to a layer by dragging an image file from a folder or directory:

1  Open a folder or directory containing the bitmap image file you want to apply as a texture.

2  In ImageStyler, select the object to which you want to apply the texture.

3  Display the Object Layers palette.

4  Drag the image file from the folder or directory onto the layer in the Object Layers palette to which you want to apply the texture.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To import an image file as a texture
Applying textures to layers

To import an image file as a texture:

1  Select the background or object and layer to which you want to apply the texture.

2  Choose File > Place as Texture.

3  Locate the image file you want to place as a texture.

4  Select Preview (Mac OS only) to display a small preview of the file. (In Windows, files are automatically previewed when possible.)

5  Click Open.

Note: For information on importing images, see Importing Images as Objects.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To add a texture to the palette by dragging
Applying textures to layers

To add a texture to the palette by dragging:

1  Select the object and a layer containing the texture you want to add to the Textures palette.

2  Drag the object or layer:

•   Drag the object from the composition window onto the Textures palette.

•   Drag the layer from the Object Layers palette onto the Textures palette.

3  In the dialog box that appears, enter the name you want to give the texture and click OK.

The texture is placed in alphabetical order in the list of available textures.

To apply an image object in ImageStyler as a texture to an object, save the image as a texture first. You can do this by dragging the image object onto the Textures palette.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To add a texture to the palette by dragging a bitmap image file
Applying textures to layers

To add a texture to the palette by dragging a bitmap image file:

1  Open a folder or directory containing the bitmap image file.

2  Make ImageStyler the active application.

3  Drag the image file onto the Textures palette.

4  In the dialog box that appears, enter the name you want to give the texture and click OK.

A copy of the bitmap image file is saved as a texture and placed in alphabetical order in the list of available textures.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To add a texture to the palette by specifying an image file
Applying textures to layers

To add a texture to the palette by specifying an image file:

1  Click the New button ( [image]) on the Textures palette.

2  Locate the image file containing the texture you want to add to the Textures palette and click Open.

3  In the dialog box that appears, enter the name you want to give the texture and click OK.

The texture is placed in alphabetical order in the list of available shapes.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture

To delete a texture from the Textures palette


To add a texture to the palette by placing it in the Textures folder
Applying textures to layers

To add a texture to the palette by placing it in the Textures folder:

1  If you want, rename an image file in the Explorer (Windows) or Finder (Mac OS) to give it the name you want to appear in the Textures palette. For use in Windows, the image file must have the correct extension for the type of imageit is.

2  Place the image file into the Textures folder located in the ImageStyler folder.

The image is placed in alphabetical order in the list of available textures the next time you start ImageStyler.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To replace a texture

To delete a texture from the Textures palette


To replace a texture
Applying textures to layers

To replace a texture:

Add a texture, but name it the same as an existing texture.

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To delete a texture from the Textures palette


To delete a texture from the Textures palette
Applying textures to layers

To delete a texture from the Textures palette:

1  In the Textures palette, select the texture you want to delete.

2  Click the Trash button ( [image]).

See also:

To display the Textures palette

To apply a texture using the Textures palette

To apply a texture to a layer by dragging an image file from a folder or directory

To import an image file as a texture

To add a texture to the palette by dragging

To add a texture to the palette by dragging a bitmap image file

To add a texture to the palette by specifying an image file

To add a texture to the palette by placing it in the Textures folder

To replace a texture


Applying 3-D effects to layers
Applying Color, Textures, and Effects to Layers

Applying 3-D effects to layers

Adobe ImageStyler includes four automated 3-D effects that you can apply to any layer of an object. These effects are cutout, embossing, beveling, and ripples.

3-D effects

•   Cutout

•   Emboss

•   Bevel

•   Ripple

To apply a 3-D effect to a layer:

1  Select the object and layer.

2  Choose Window > 3-D.

3  For Effect, choose one of the following:

None

Applies no effect.

Cutout

Makes the object look as if it were cut out from the background and below it.

Emboss

Adds soft, rounded edges to the object.

Bevel

Applies an angled cut to the outside edges of the object.

Ripple

Creates waves from the center to the edges of the object.

4  Specify the intensity of the effect:

•   For Depth, enter a value between 0 (for no distance) and 40 to specify the distance in pixels between the edge of the layer and where the effect is greatest. Entering a higher value increases distance and creates a greater apparent depth.

•   For Softness, enter a value between 0 (for no blur) and 10 to specify the amount of gaussian blur to apply to the layer. Entering a higher value increases the apparent smoothness of the effect. This is useful for preventing jagged edges appearing on bevels and to round over the top of a bevel.

•   For Lighting, enter a value between 0 (for no difference) and 200 to specify the difference between the light and dark areas of the object. Entering a value of 100 uses all the lighting information in the object; entering lower and higher values has an effect similar to underexposing and overexposing the object.

5  Choose an Edge setting to specify the type of edge.

Note: The Edge settings are unavailable when you use the Cutout option.

6  Choose a Light setting:

•   Normal to apply neutral lighting, highlights, and shadows to the object.

•   Light Only to apply just neutral lighting and highlights to the object.

•   Dark Only to apply just neutral lighting and shadows to the object.

7  In the angle area ( [image]), enter the rotation angle in degrees to indicate the source of the light. An angle of 0° lights the object from the right, 90° lights it from the top, 180° lights it from the left, and 270° lights it from the bottom.


Applying distortion effects to layers
Applying Color, Textures, and Effects to Layers

Applying distortion effects to layers

The Distort palette provides a variety of distortion effects that let you alter the fill on any layer of an object.

Distortion effects

•   Displace

•   Lens

•   Twirl

•   Spherize

•   Quantize

•   Radial Quantize

The results of the distortion effect depend on what the shape on that layer is filled with:

•   Applying a distortion to a layer filled with a solid, ungradated color has no visible effect. However, you can distort a layer filled with a gradient.

•   Applying a distortion to a layer filled with a texture distorts the texture.

•   Applying a distortion to a layer filled with an image distorts the image.

•   Applying a distortion to a layer filled with the background distorts areas below the object, creating a lens-like effect.

Note: Applying a distortion to a layer has no noticeable effect if the layer is over an area filled with a solid color.

To distort a layer:

1  Select the object and layer.

2  If you want, specify the fill for the shape on that layer: a color (not recommended), the background, an image, or a texture. For more information, see Using the Object Layers palette.

3  Choose Window > Distort.

4  For Filter, choose one of the following:

None

Applies no effect.

Displace

Shifts the fill. This option works best with shapes that are filled with the background and have a 3-D effect applied, because Displace bases its distortion on the apparent “depth” of the shape. Increasing the Distance value moves the fill further in the direction of the angle you specify.

Lens

Magnifies or shrinks the fill. Increasing the Magnification value enlarges the fill, decreasing shrinks it. Entering an Angle value rotates the fill in the direction you specify.

Twirl

Rotates the fill more sharply at the center than at the edges. Entering a positive Turn value rotates the view clockwise; entering a negative value rotates the view counterclockwise. A value of 100 creates one complete turn.

Increasing the Band Size value splits the image into increasingly larger concentric bands. Within each band the pixels are rotated the same amount.

Spherize

Wraps the fill around a sphere, creating an effect similar to a fisheye lens. Increasing the Magnification value enlarges the fill, decreasing shrinks it. Entering a positive Sphere value increases the size of the fill at the center; entering a negative value shrinks it.

Quantize

Breaks up the fill into tiles or blocks. The Size value determines the size of the tiles in pixels.

Radial Quantize

Breaks up the fill into circular bands radiating from the center of the shape. The Size value determines the width of the band in pixels.


Exporting for the Web

About exporting

Export formats

About object islands and exporting selections

Exporting compositions

Previewing and optimizing your compositions

Slicing a composition and preserving its layout

Using batch replace HTML

Attaching JavaScript actions to objects

Creating linked images and image maps

Using ImageStyler HTML code


About exporting
Exporting for the Web

About exporting

Before exporting your work, ImageStyler lets you preview the exported composition and interactively adjust it to achieve the best results in a Web browser. For example, you can see how changing an export setting affects the image quality and file size.

In addition, ImageStyler export features let you:

•   Export an entire composition or just selected objects.

•   Create an HTML page as you export that references your image files.

•   Slice a composition and have ImageStyler generate an HTML table that reassembles the parts on a Web page.

•   Create JavaScript rollovers.

•   Attach URLs to objects to create image maps, such as a set of buttons in an HTML page.

•   Batch-generate Web graphics using HTML heading tags and class attributes.

•   Export the background of a composition as an HTML background.

Before exporting a composition, you should save it as an ImageStyler file so that you can reedit the composition if needed (see Saving files).


Export formats
Exporting for the Web

Export formats

To use a composition in a Web page, you export ImageStyler compositions to the common Web graphics file formats: JPEG, GIF, PNG-Indexed, and PNG-Truecolor. The format you use depends on the characteristics of the image.

You can also export your work to the Adobe Photoshop file format.

See also:

JPEG

GIF

PNG-Indexed

PNG-Truecolor

Photoshop


JPEG
Export formats

JPEG

Designed for use with photographic images, and other continuous-tone images. JPEG uses 24-bit color, and preserves the broad range and subtle variations in brightness and hue found in photographs.

The JPEG format uses a lossy compression method, in which data is discarded during compression. The JPEG compression method can degrade sharp detail in some images, such as images containing type or line art.

You specify the amount of compression to be applied by choosing a quality setting. A higher quality setting results in less data being discarded and a larger file size.

Note: Data is discarded from a JPEG image each time you export a JPEG file. You should always save JPEG files from the original composition if possible, rather than reimporting and exporting the image multiple times.

ImageStyler creates a JPEG file that downloads progressively, so viewers can see a low-resolution version of the image before the image downloads completely.


GIF
Export formats

GIF

Supports 8-bit indexed color for a display of up to 256 colors. The GIF format is a good choice for compressing solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type.

When you export to the GIF format, ImageStyler generates an adaptive indexed color table that contains the colors most commonly used in the image. ImageStyler then shifts the colors toward the Web-safe palette—the set of colors used by Web browsers when displaying images on an 8-bit color display. If your composition is primarily composed of Web-safe colors, this shift toward the Web palette helps ensure that your exported GIF image’s color table is predominantly comprised of Web-safe colors.

The GIF format uses a lossless compression method in which no data is discarded during compression. However, since GIF images can use a maximum of 256 colors and ImageStyler compositions can be made up of millions of colors, you may see degraded image quality when saving to the GIF format.

ImageStyler creates an interlaced GIF image, in which a low-resolution version of the image appears in a Web browser while the full image is downloading.

ImageStyler use the composition’s alpha channel or active matte information to export transparent GIF images. For more information, see Using alpha channels and active mattes to crop image objects.


PNG-Indexed
Export formats

PNG-Indexed

Also known as PNG-8, supports 8-bit indexed color. Like the GIF format, PNG-Indexed compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. The PNG-Indexed format uses a lossless compression method, in which no data is discarded.

ImageStyler use the composition’s alpha channel or active matte information to export PNG-Indexed files with a single level of transparency.

PNG-Indexed is supported directly by Internet Explorer 4.0 and later, and by Internet Explorer 2.0 or later and Netscape Navigator 2.0 or later using a plug-in.


PNG-Truecolor
Export formats

PNG-Truecolor

Also called PNG-24, supports 24-bit color. Like the JPEG format, PNG-Truecolor preserves the broad color and tonal range of photographic images. Unlike JPEG, PNG-Truecolor uses a lossless compression method, in which no data is discarded.

ImageStyler exports PNG-Truecolor files with a single level of transparency.

PNG-Truecolor is supported directly by Internet Explorer 4.0 and later, and by Internet Explorer 2.0 or later and Netscape Navigator 2.0 or later using a plug-in.


Photoshop
Export formats

Photoshop

Exports a flattened image in Photoshop format that can then be opened in Adobe Photoshop, Adobe ImageReady(TM), and Adobe Illustrator.


About object islands and exporting selections
Exporting for the Web

About object islands and exporting selections

When you export a composition to multiple image files (using AutoSlice, AutoLayout, or Batch Replace HTML), ImageStyler divides the composition along the object island boundaries. An object island includes any objects that are grouped or any objects that touch or overlap (including their bounding boxes). The entire overlapped objects are exported.

However, when you choose Export Selection to export part of a composition, ImageStyler exports as one file all objects that are grouped and that portion of objects that overlap the selected object’s bounding box.

Selection and exported object


Exporting compositions
Exporting for the Web

Exporting compositions

To export a composition, you choose an export format, set options for that format, and then choose an export command.

To export a composition:

1  Choose Window > Export or File > Export Settings to show the Export palette.

2  In the Export palette, select Active Preview so that you can interactively select compression settings. (See Previewing and optimizing your compositions.)

3  Choose a file format from the pop-up menu: Photoshop, GIF, JPEG, PNG-Indexed, or PNG-Truecolor.

4  If exporting as a GIF or PNG-Indexed file:

•   Specify the number of colors for the exported image by dragging the Colors slider or entering a value (2–256) in the text box. (Pressing Shift while dragging the slider constrains the value to common color depths.)

•   Select Dither to mix available colors to simulate unavailable colors. Dithering often improves the gradation after you have reduced the number of colors— but increases the exported image’s file size. You can see dithering with Active Preview on.

•   Select Transparency to export the image with the object’s alpha channel or active matte. (See Using alpha channels and active mattes to crop image objects.)

5  If exporting as a JPEG file:

•   Specify the quality for the exported image by dragging the Quality slider or entering a value (0–100) in the text box. Higher values increase the quality and the file size of the exported image.

•   Select Reduce Chroma to create a slightly smaller JPEG file by reducing the color information in the exported image. Reduce Chroma discards every other pixel in the chroma information without affecting the luminance, and typically without visibly changing the image quality. If the image quality visibly degrades, increase the Quality setting.

6  If exporting as a PNG-Truecolor file, select Transparency to export the image with the object’s alpha channel or active matte. (See Using alpha channels and active mattes to crop image objects.)

7  Choose an Export option from the pop-up menu at the bottom of the Export palette:

•   Entire Composition exports the composition as one file.

•   Trimmed Composition exports the smallest area enclosing all the objects in the composition.

•   AutoSlice exports each object or group of objects as a separate file and generates an HTML page that references the images.

•   AutoLayout slices a composition and preserves the layout of a composition in the generated HTML page.

(See Slicing a composition and preserving its layout.)

8  If you selected Entire Composition or Trimmed Composition, choose whether to create an HTML page:

•   Select Make Page if your composition contains rollovers or image map information. This option generates an HTML file that contains the image map associated with the exported graphics. For more information see, Attaching JavaScript actions to objects and Creating linked images and image maps.

•   Deselect Make Page if you want to export only an image file.

Note: AutoSlice and AutoLayout automatically generate HTML files.

9  Choose an Export command:

•   To export the entire composition as one or multiple files, choose File > Export.

•   To change the name or location of an exported file for a previously exported composition, choose File > Export As.

•   To export only the currently selected objects, choose File > Export Selection. ImageStyler exports the smallest rectangle that completely encloses the bounding boxes of the selected objects.

Note: You will overwrite a previously exported file the next time you choose File > Export. Choose Export As and type a new filename to export multiple versions of a file.

10  Name the file and select the folder where you want to export it, and then click Save.


Previewing and optimizing your compositions
Exporting for the Web

Previewing and optimizing your compositions

You can optimize your artwork in ImageStyler by choosing export quality settings and viewing the resulting file size. You can also preview the composition in a Web browser. If needed, you can edit the composition or change compression settings to further reduce the file size as you preview the result.

In addition to changing the file size, ImageStyler updates the view of the composition to reflect the compressed image.

Note: Performance slows when you work in Active Preview mode; use this mode only for proofing your work.

See also:

To optimize your composition

To preview a composition in a Web browser

To add a browser or other application to the Preview In menu


To optimize your composition
Previewing and optimizing your compositions

To optimize your composition:

1  Do one of the following options:

•   Choose View > Active Export Preview.

•   In the Export palette, select Active Preview. (If necessary, choose Window > Export to display the Export palette.)

Selected objects in the composition have a red border when Active preview is on.

File size

2  View the result of changing export settings on your composition and the actual size of the exported file. For information on changing export settings, see Exporting compositions.

If the AutoSlice or AutoLayout option is selected, the actual size is the sum of files that will be exported.

3  If you need to further reduce an image’s file size, turn on Active Preview as you edit your composition to view image quality and file size. All commands and tools work in Active Preview mode.

4  To turn off Active Preview, do one of the following options:

•   Choose View > Active Export Preview.

•   In the Export palette, deselect Active Preview.

See also:

To preview a composition in a Web browser

To add a browser or other application to the Preview In menu


To preview a composition in a Web browser
Previewing and optimizing your compositions

To preview a composition in a Web browser:

Choose File > Preview In and choose a browser from the list. ImageStyler launches the browser and displays the composition in the browser window.

You can also preview a composition in Photoshop or ImageReady if you have those applications installed and a shortcut or alias in the Preview In folder.

Note: If Entire Composition or Trimmed Composition is selected in the Export palette, Make Page must be selected to preview the composition in a Web browser.

See also:

To optimize your composition

To add a browser or other application to the Preview In menu


To add a browser or other application to the Preview In menu
Previewing and optimizing your compositions

To add a browser or other application to the Preview In menu:

1  Create a shortcut (Windows) or an alias (Mac OS) for the browser you want to add to the menu. Or, create a shortcut or alias for Photoshop and ImageReady.

2  Drag the icon for the shortcut or alias into the Preview In folder in the ImageStyler program folder.

3  Restart ImageStyler to view the browser in the Preview In menu.

See also:

To optimize your composition

To preview a composition in a Web browser


Slicing a composition and preserving its layout
Exporting for the Web

Slicing a composition and preserving its layout

When you export your composition, you can slice it into its components and make a separate image file for each object or group of objects. ImageStyler also creates an HTML file that references the exported images.

You can preserve the layout of a composition in the generated HTML page by using the AutoLayout option. ImageStyler creates a table in the HTML page and places the objects in the table cells to approximate the composition.

When you slice a composition, you can specify a filename and alternate text for each image.

See also:

Exporting a sliced composition

Specifying filename, alternate text, and target for a sliced image


Exporting a sliced composition
Slicing a composition and preserving its layout

Exporting a sliced composition

ImageStyler determines how to slice a composition by finding any objects that are grouped or are touching and placing them in the same image file.

Note: If a composition is not slicing as expected, make sure that the bounding box of the objects is not touching. (See About object islands and exporting selections.)

Any background color or texture you’ve applied to the composition is preserved in the individual images. The background is also exported as an image file.

To slice a composition:

1  In the Export palette, set file format and quality options. (See Exporting compositions.)

2  In the Export palette, choose AutoSlice or AutoLayout from the bottom pop-up menu:

•   AutoSlice places images in the HTML file, starting from the top left of the composition in order to the bottom right.

•   AutoLayout creates a table in an HTML file that approximates the layout of the exported ImageStyler composition.

3  Specify the filename, alternate text, and target for the images, if desired. (See “Specifying filename, alternate text, and target for a sliced image.”)

4  Choose File > Export and select a location to save the HTML file and the image files.

ImageStyler places the exported image files in a folder called images located in the same folder as the HTML file.

5  Open the HTML file in your Web browser or Web page design application, or import the image files into another Web page.


Specifying filename, alternate text, and target for a sliced image
Slicing a composition and preserving its layout

Specifying filename, alternate text, and target for a sliced image

Before you slice a composition, you can specify a filename, and alternate text for the image. If you don’t specify a filename, ImageStyler creates the name. Alternate text is used in a Web browser when an image is not found or when the image is downloading slowly.

You can also specify a target window or frame for a page that an image links to. For example, if you create a button that opens a Web page, you can specify whether you want the page to open in a new browser window. Or, you could specify that the page opens in a specific frame if you are using the button in a frameset.

For more information on using these fields, consult an HTML reference guide.

To specify a filename, alternate text, or target:

1  Select any object that will become part of an exported image.

2  Choose Detail View from the pop-up menu at the top right of the Web palette to expand the palette.

3  To specify a filename for the exported image, type the name in the File Name text box.

4  To specify alternate text for the exported image, type the text in the ALT text box.

5  To target an exported button’s linked page to a new window or a specific frame in a frameset, make sure that you entered a URL for the image, and then enter one of the following in the Target text box:

•   _blank to load the linked page into a new browser window (include the underscore).

•   _parent to load the linked page into the containing frame of the frameset (include the underscore).

•   _self to load the linked page into the frame that contains the button (include the underscore). This is the default if no target is specified.

•   _top to load the linked page into the top frame (include the underscore).

•   The name of any frame in the frameset (don’t include an underscore at the beginning).

For information on adding a URL to an exported image, see Creating linked images and image maps.


Using batch replace HTML
Exporting for the Web

Using batch replace HTML

Using the Batch Replace HTML command, you can replace the heading text in an HTML file with images to make your Web page more interesting.

You use a styled text object in an ImageStyler composition as a template, and then specify the HTML text it should replace. ImageStyler searches the HTML file and extracts text with the specified heading tag (or text with the specified class attribute), and then, in ImageStyler, applies the text object’s style to the text, exports an image file, and finally replaces the original HTML text with the image.

Original Web page and Web page after ImageStyler text replacement

If the text object overlaps any other objects, all the objects are exported. If the text object is part of a group, the entire grouped object is exported and the text is replaced.

The original HTML text is stored in the Web page’s source code, so you can run the Batch Replace HTML command again to update the look of your Web page.

If you need to change the text of a heading, you can edit the Web page’s source code and rerun the replacement command. For more information, see Using ImageStyler HTML code.

You can also use this batch replacement technique to create a set of matching text buttons.

To create headings or buttons that change as the user moves the pointer over them, attach a JavaScript action to the exported object. (See Attaching JavaScript actions to objects.)

See also:

To replace headings in an HTML file with images

To create a set of text buttons in an HTML file


To replace headings in an HTML file with images
Using batch replace HTML

To replace headings in an HTML file with images:

1  Using an HTML editing application, make sure that the text you want to update is tagged with the appropriate heading (H1 through H6) or with a Class attribute.

Note: For more information about HTML headings and Class attributes, see an HTML reference guide or the documentation that came with your HTML editing application.

2  In ImageStyler, select the text object whose style you want to use in the replacement images. If the text object is part of a group, select the grouped object.

3  Choose Window > Web to display the Web palette.

4  Choose the heading level (H1 through H6) of the text you want to replace in the HTML file. If you are replacing text tagged with a Class attribute, choose Class from the pop-up menu and then type the attribute name in the text box to the right.

5  Choose File > Batch Replace HTML.

6  Select the HTML file containing the text you want to update and click Open. You can select multiple files to process by Shift-clicking the file names in the dialog box.

7  To check the replacement images, open the file in a Web browser.

See also:

To create a set of text buttons in an HTML file


To create a set of text buttons in an HTML file
Using batch replace HTML

To create a set of text buttons in an HTML file:

1  Using an HTML editing application, enter the text you want on each button. Make sure that the text for each button is tagged with an HTML heading tag (H1 through H6) and separate the text using Tabs or an HTML tag such as <BR>.

2  In ImageStyler, create a button that uses the style and size of the buttons you want to create. The button should include a text object.

3  To allow the button to resize to fit the button text in the HTML file, select the sample text object and the other objects that make up the button. Then choose Object > Group, and then Object > Maintain Alignment. For more information on these commands, see Grouping objects and Maintaining text alignment with grouped objects.

To add an underline to text that will resize with the text, use the rectangle tool to draw a line. Then group it with the button and use the Maintain Alignment command.

4  Select the grouped object, and then in the Replace pop-up menu in the Web palette, choose the HTML heading level of the text you are converting to buttons.

5  Choose File > Batch Replace HTML

6  Select the HTML file or files containing the text you want to update and click OK.

To test the replacement, open the HTML file in a Web browser.

See also:

To replace headings in an HTML file with images


Attaching JavaScript actions to objects
Exporting for the Web

Attaching JavaScript actions to objects

You can create buttons for your Web pages that change their look as the user moves the pointer over or away from the button, or clicks the button. ImageStyler generates JavaScript code for you that you can cut and paste into the source view of your Web design application.

NoAction, onMouseOver, and onMouseDown actions

To attach a JavaScript action to a button, you select an object and then attach a state to the object. You then alter the object to represent different states. When you export the composition, you must use AutoSlice or AutoLayout. For more information, see Exporting compositions .

Users must have a JavaScript-enabled browser to see the action; if they don’t, only the noAction state will be visible.

To connect a JavaScript action to an object:

1  Select the object to which you’ll attach an action.

2  Choose Window > JavaScript to display the JavaScript palette.

A. X Offset B. State C. Y Offset D. New E. Duplicate F. Delete

The palette displays a row of buttons to create a new state, duplicate a state, or delete a state.

The noAction state appears selected at the top of the palette, with a thumbnail to its left. By default, no actions are attached to an object. The palette contains three additional states that are dimmed:

•   onMouseOver displays when the pointer is directly over the object when displayed in a Web page.

•   onMouseDown displays when the pointer clicks the object when displayed in a Web page.

•   onMouseOut displays when the pointer is moved away from the object when displayed in a Web page.

3  To create a new action, click the New button at the bottom of the JavaScript palette. The state labeled onMouseOver appears selected in the palette.

4  Create a unique appearance for the state by doing any of the following:

•   Use the X Offset and Y Offset text boxes or arrows at the top of the JavaScript palette to move the object horizontally or vertically from the noAction state.

•   Apply any ImageStyler style, texture, or shape to the selected object; or apply a color or gradient.

•   In the composition, drag the object by its upper right corner or anchor point to rotate it.

•   Use the ImageStyler palettes, tools, and commands to change the object’s appearance, position, and size.

5  Add additional states to the action, if desired:

•   Click the New button to replicate the object’s state for noAction for the next action.

•   Click Duplicate to copy the selected state for the next action.

To delete the currently selected action (except noAction), click Delete.

6  For each state you add, repeat step 4 to give the object a unique appearance.

7  To attach a URL to an object with a JavaScript action attached, select the object and use the Web palette to enter a URL in the text box.

8  Export the composition using the Make Page option (or using AutoSlice or AutoLayout). ImageStyler exports the image files and creates an HTML page with the JavaScript code.

You can then open the HTML file in a Web browser to test the action.

Note: If you’re using ImageStyler to build a set of rollover buttons or a toolbar, you can copy the code that ImageStyler creates into another HTML file. (See Using ImageStyler HTML code.)


Creating linked images and image maps
Exporting for the Web

Creating linked images and image maps

Any object you create in ImageStyler can be linked to a Uniform Resource Locator (URL), transforming the object into a button that links the user to another Web page. An image map is an image on a Web page that contains multiple links. Areas of an image map, called hotspots, link to URLs.

You create image maps in ImageStyler by first attaching links to individual objects. Then, using the Make Page option, you export the objects as a single image. ImageStyler generates the HTML code for the image map. You can then open the HTML page and copy and paste the HTML code into the source view of your Web-page design application. (See “Using ImageStyler HTML code.”)

If you overlap objects in creating an image map in ImageStyler, the topmost object is the active hot spot in the overlapping areas.

ImageStyler creates client-side image maps, in which the links are interpreted by the browser itself. Unlike server-side image maps, client-side image maps don’t need to contact the server to function, and thus are significantly faster to navigate.

To link an object to a URL or to create an image map:

1  Select the object to which you want to assign a URL.

2  Choose Window > Web to display the Web palette.

3  Assign a URL:

•   Enter a URL in the URL text box.

•   Copy and paste a URL into the URL text box.

•   Drag and drop a URL onto the object to place the URL in the URL text box.

Note: Dragging a URL from Adobe PageMill(R) and dropping it on an ImageStyler object copies the text and the URL of the PageMill filename and location.

4  Repeat steps 1 through 3 for additional objects you want to use as an image map.

5  Export the composition with Make Page selected.

ImageStyler exports the image files and creates an HTML page with the client-side image map.


Using ImageStyler HTML code
Exporting for the Web

Using ImageStyler HTML code

As you build your Web pages, you can open and edit the HTML files that ImageStyler generates in a Web page design application such as Adobe PageMill. You can also copy and paste the HTML code generated by ImageStyler into pages you create in another application. For example, if you create an image map in ImageStyler, you can do either of the following:

•   Use the HTML page that ImageStyler generated in your Web site. The image reference and image map code are included in the page’s source.

•   Open the HTML page that ImageStyler generated in your Web page design application or HTML editor, view the page’s source, copy the image map code, and then paste it into the source view of another page.

If you’ve used the Batch Replace HTML command and want to edit the original text, you can edit the datamap code in the Web page’s source.

For more information, see the documentation that came with your Web page design application or an HTML reference guide.

See also:

To copy JavaScript code into a Web page

To copy image map code into a Web page

To edit the original text in a Web page after batch replacing with images


To copy JavaScript code into a Web page
Using ImageStyler HTML code

To copy JavaScript code into a Web page:

1  In your HTML editor, open the HTML page that ImageStyler created. If you are using a Web page design application such as PageMill, open the HTML page and switch to Source Mode.

2  Copy the JavaScript code from the Head section of the HTML page into the Head section of the other page. Make sure that you copy all the text between the beginning tag <Script> and the closing tag </Script>.

3  Copy the anchor elements for the images from the Body section of the page and paste them to the appropriate location where you want them to appear in the body of the other page. The anchor element begins with the tag <a HREF= “nnn” and ends with the </a> tag. The anchor element will also contain the reference to the image files.

See also:

To copy image map code into a Web page

To edit the original text in a Web page after batch replacing with images


To copy image map code into a Web page
Using ImageStyler HTML code

To copy image map code into a Web page:

1  In your HTML editor, open the HTML page that ImageStyler created. If you are using a Web page design application such as PageMill, open the HTML page and switch to Source Mode.

2  Copy and paste the reference code for the exported image and the image map into the source of your new page. The image reference begins with the tag <img src= and ends with the symbol >. The image map code immediately follows and is enclosed by the tags <MAP name= “nnn”> and </MAP>.

See also:

To copy JavaScript code into a Web page

To edit the original text in a Web page after batch replacing with images


To edit the original text in a Web page after batch replacing with images
Using ImageStyler HTML code

To edit the original text in a Web page after batch replacing with images:

1  In your HTML editor, open the Web page. If you are using a Web page design application such as PageMill, open the Web page and switch to Source Mode.

2  Find the reference for the image you want to change (it starts with <img src=). Note the Name attribute for the image reference, for example, Name=“object10”.

3  At the end of the source code, before the </Body> tag, you’ll find the DataMap comment that ImageStyler created. Find the ObjId that matches the Name attribute. Edit the text in the FPOrigText attribute associated with the ObjId, for example, <?FPPI ObjId="object10" FpOrigTag="H1" FpOrigText="My Heading" ?>.

See also:

To copy JavaScript code into a Web page

To copy image map code into a Web page


Combine effects

Original	Unite


Combine effects

Original	Unite with color


Combine effects

Original	Minus front


Combine effects

Original	Intersect


Combine effects

Original	Exclude


3D effects

Original	Cutout


3D effects

Original	Emboss


3D effects

Original	Bevel


3D effects

Original	Ripple


Distortion effects

Original	Displace


Distortion effects

Original	Lens


Distortion effects

Original	Twirl


Distortion effects

Original	Spherize


Distortion effects

Original	Quantize


Distortion effects

Original	Radial quanitze